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