Navigation

 

Artikel Kategorien

Das Problem: Es sollen diverse Bilder mit verschiedenen Seitenverhältnissen (16:9, 4:3, …) in einem Raster dargestellt werden (variable Breite, feste Höhe). Dabei soll von jedem Bild so viel wie möglich dargestellt werden. Die liste der Grafiken werden automatisch erstellt und können daher nicht individuell gestaltet werden. Auch auf Javascript wollen wir verzichten.

Die Lösung dafür ist recht simpel. Wir überlassen über die CSS-Eigenschaft “background-size”, das skalieren ganz dem Browser. Diese Eigenschaften können wir jedoch nicht auf ein “img”-Tag anwenden. Deshalb modifizieren wir unsere HTML Struktur wie folgt:

<div class="img" style="background-image: url('{{ image.url }}');"></div>

Unser CSS-Code sieht dann wie folgt aus:

.img {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

Ein Beispiel dafür unter: JSFiddle

Hier ein Vergleich, der zeigt, das man mit dem nativen img tag lediglich die Breite oder die Höhe festlegen kann: JSFiddle

 

Zuletzt aktualisiert am 02.10.2015