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. containobject-fit ist das Äquivalent für Bilder im img-Tag.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 demo 1
object fit beispiel 2

object-fit cover

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="…">
interaktive Demo object fit Bild einpassen Seitenverhältnis

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.

Beispiel object-fit mit object-position
Beispiel nur linken Bildrand zeigen
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.

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; 
   }
}