CSS object fit – Größe von Bildern und Videos anpassen

CSS object-fit

object-fit bestimmt, wie Bilder und Videos verkleinert oder vergrößert werden, um in das Layout zu passen, wenn das Bild oder Video nicht vorher schon im Bildbearbeitungsprogramm oder beim Videoschnitt auf ein bestimmtes Seitenverhältnis zugeschnitten wurde.

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

Bilder anpassen

CSS hat ein großes Repertoire von Stilvorgaben für Bilder: border, border-radius, box-shadow, clip-path (nicht Microsoft IE und EDGE), mask (nicht IE11), Filter sowie das Anpassen der Größe in einem responsiven Design durch width: 100%, height: auto.

Insbesondere in Content Management Systemen ist die Anpassung an die Seitenverhältnisse des verfügbaren Platzangebots gefragt, wenn dem Benutzer die Mittel der Bildbearbeitung nicht zur Verfügung stehen oder unterschiedliche Seitenverhältnisse durch die Anpassung an den ViewPort gefordert sind.

box-shadow 2
box-shadow-image-4

object-fit cover

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

.img-fit {
   width: 50%
   height: 250px; 
}

<img class="img-fit" src="img.jpg" width="947" height="480" alt="…">
box-shadow 2 box-shadow-image-4

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-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.

image landscape fit
image portrait fit
.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; 
   }
}