CSS object fit – img / video anpassen

Bilder anpassen

CSS hat ein respektables Repertoire von Stilen für Bilder: border, border-radius, box-shadow, clip-path, mask und filter (nicht IE11), sowie Eigenschaften für Größenanpassungen in ein responsives Design durch width: 100%, height: auto.

In den Themes der Content Management Systeme ist die Anpassung an die Seitenverhältnisse des verfügbaren Platzangebots ein MUSS. Vielleicht stehen dem Benutzer die Mittel der Bildbearbeitung nicht zur Verfügung oder ein festes Seitenverhältnis ist für die Anpassung an den ViewPort gefordert.

object-fit cover

Bei Hintergrundbildern mit background-image wirken background-size: cover bzw. contain – object-fit ist das Äquivalent für Bilder im img-Tag.

object-fit passt ein Bild an seinen umfassenden Block an, entweder unter Beibehaltung des Seitenverhältnisses oder durch Aufziehen und Dehnen, um den gesamten verfügbaren Platz einzunehmen.

Mit cover deckt object-fit die volle Höhe des Blocks ab und die Seiten des Bilds sind rechts und links abgeschnitten.

.img-fit {
   width: 50%;
   object-fit: cover;
   height: 200px; 
}

<img class="img-fit" src="img.jpg" width="947" height="480" alt="…">

Breit Hoch Quad

Wie immer streichen wir IE11 direkt von der Liste der Browser, die eine Bildanpassung über object-fit unterstützen – IE 11 verzerrt die Bilder weiterhin und zeigt nicht das korrekte Seitenverhältnis.

object-position

Im Beispiel oben ist es natürlich Glück (oder ein umsichtig ausgewähltes Foto), dass die Möwe und die Tauchglocke in Grömitz schön in der Mitte sitzen. Bei anderen Bildern hingegen würde das zentrale Motiv u.U. aus dem Bildausschnitt gedrängt.

object-position versetzt den angezeigten Bildausschnitt.

img {
	width: 300px; 
	height:300px; 
	object-fit: cover;
	object-position: 10%
}

object-position teilt die Breite in 0 bis 100%.

• Mit object-position: 0% würde der linke Bildausschnitt gezeigt,
• mit object-position: 50% der mittlere und
• mit object-position: 100% der rechte Rand des Bildes eingesetzt.

Et voilà – object-position ist animierbar.

object-fit – contain

object-fit: contain rendert Bilder responsiv und ohne Beschneiden in ihrem umfassenden Block und passt sie entsprechend ihrer längeren oder breiteren Kante ein.

.thumb img {
	object-fit: contain;
	width:100%;
	height:100%
}

object-fit für Video

funktioniert genauso wie bei Bildern:

video {
   display: block; object-fit: cover; 
   width: 100%; 
    height: 200px; 
}

@media (min-width: 1260px) {
   .rowvid video {
      height: 300px; 
   }
}