Eigenschaft object-fit

Die Eigenschaft object-fit legt das Seitenverhältnis oder die Skalierung von Elementen wie Bildern oder Videos fest.

Syntax

Selektor {
	object-fit: fill oder contain oder cover oder none;
}

Die Tabelle zeigt die Hauptwerte für die Eigenschaft object-fit:

Werte

Wert	Beschreibung
`fill`	Skaliert das Element, um den vorgegebenen Abmessungen zu entsprechen, wobei die Proportionen des Elements ignoriert werden.
`contain`	Skaliert das Element, um den vorgegebenen Abmessungen zu entsprechen, wobei die Proportionen des Elements beibehalten werden.
`cover`	Die Abmessungen des Elements werden so geändert, dass der angegebene Bereich vollständig ausgefüllt wird, wobei die Proportionen des Elements selbst beibehalten werden.
`none`	Die ursprünglichen Abmessungen des Elements werden beibehalten.

Beispiel

Lassen Sie uns unser Bild so einstellen, dass es die angegebene Größe füllt, ohne die Proportionen beizubehalten:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns nun das Bild so einstellen, dass es den angegebenen Container unter Beibehaltung der Proportionen ausfüllt:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns den angegebenen Container mit unserem Bild so füllen, dass die Größe des Bildes selbst sich ändert, aber seine Proportionen beibehalten werden:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns unser Bild einfach in den angegebenen Container platzieren und dabei seine ursprüngliche Größe beibehalten:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Siehe auch

die Eigenschaft aspect-ratio,
die das Seitenverhältnis eines Elements definiert