Zitat von
Der Astronaut
Je nach mobiler Auflösung bestimme ich nun die Breite der Thumbnails via Media-Query.
Du brauchst die Breite der Thumbs per CSS überhaupt nicht zu bestimmen. Sorge dafür, dass der umschließende Container eine Breite von 33.3333% hat. Das kann z.B. das Figure oder das LI sein, oder eine Spalte von deinem Grid-System. Dem Bild darin brauchst du dann nur noch zu sagen max-width:100%; (width:100%; wenn du auch noch kleinere Bilder aufziehen möchtest). height:auto; ist selbstredend. Wenn du pixelgenau arbeiten möchtest, dann setze auch das hier in dein CSS:
PHP-Code:
.image_container a,
.image_container img {
display: block; /* IMGs und As sind Inline-Elemente */
}
Kommt es zu der Frage, wie groß lasse ich Contao die Bilder erzeugen, dann kannst du dich an dem größten von dir unterstützten Viewport orientieren. Ich hatte letztens mal einen Fall, da waren die Bilder ca 1 Pixel größer als sie mit max 100% durften und das kleiner Drücken hat das Bild unscharf gemacht. Wenn dein errechneter Wert also eine Kommastelle hat, dann runde den Wert besser ab.
Nur so am Rande: Je weniger feste Breitenangaben du machst, desto besser (flexibler) ist dein CSS.
Lesezeichen