Posted by Udden on April 19, 2011 at 8:43am
Hej,
Jag försöker ta kommando över layouten på min webbplats.
Hur gör jag för att alla bildelement t.ex. produktbilder ska uppta utrymmet 200x200 px. I CCK fältet har jag satt med hjälp av imagecache att bilderna ska vara 200 px (på längsta sidan), och de blir de. Problemet är att en stående (200px hög) bild knuffar ner innehållet under och en liggande bild (200 px bred) tar inte alls lika mycket plats i höjd.
MVH Tomaz
Comments
Med imagecrop:
Med imagecrop: http://drupal.org/project/imagecrop så kan du låta dina användare att beskära bilden i en bestämd storlek, 200x200 px i ditt fall.
Annars så kan du bara lägga till "Scale and Crop" som action i din preset och sedan bestämma att alla bilder skall förstoras till 200px i bredd och sedan beskäras till 200px i höjd, eller vice versa. Nackdelen med det är att användare själva inte kan bestämma vart bilden skall beskäras då.
Säg till om du behöver mer hjälp!
//J
Bestämt utrymme
Tack!
Detta är absolut ett alternativ.
Går det med CSS att sätta att bilden ska uppta en plats på 200x200px (även om bilden bara blir 200x130)?
/Tomaz
"Går det med CSS att sätta
"Går det med CSS att sätta att bilden ska uppta en plats på 200x200px (även om bilden bara blir 200x130)?"
Ja, du måste ha ett omgivande element:
<span class="imagewrapper"><img src="bild.png" alt="min fina bild">
</span>
och i CSS:en låt line-height vara samma som height:
.imagewrapper {display: inline-block;
height: 200px;
line-height: 200px;
text-align: center;
width: 200px;
}
.imagewrapper img {
vertical-align: middle;
}
--
fyrkantigt.se av Niklas Brunberg