Die CSS-Eigenschaft object-fit
wird verwendet, um anzugeben, wie ein Die Größe von <img> oder <video> sollte an den Container angepasst werden.
Die CSS-Eigenschaft object-fit
wird verwendet, um anzugeben, wie ein <img> oder <video> sein soll Größe angepasst werden, damit es in den Behälter passt.
Diese Eigenschaft weist den Inhalt an, den Container auf verschiedene Arten zu füllen; wie zum Beispiel „Dieses Seitenverhältnis beibehalten“ oder „Strecken Sie sich aus und nehmen Sie so viel Platz ein wie“ möglich".
Schauen Sie sich das folgende Bild aus Paris an. Dieses Bild ist 400 Pixel breit und 300 Pixel hoch:
Wenn wir das Bild oben jedoch so gestalten, dass es die halbe Breite (200 Pixel) und die gleiche Höhe (300 Pixel) hat, sieht es folgendermaßen aus:
img {
width: 200px;
height:
300px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:300px;
}
</style>
</head>
<body>
<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Wir sehen, dass das Bild gestaucht wird, um in den Container mit 200 x 300 Pixeln zu passen (sein ursprüngliches Seitenverhältnis wird zerstört).
Hier kommt die Eigenschaft object-fit
ins Spiel in. Die Eigenschaft object-fit
kann eine der folgenden Eigenschaften annehmen: folgende Werte:
fill
- Dies ist die Standardeinstellung. Die Größe des Bildes wird angepasst, um es auszufüllen gegebene Dimension. Bei Bedarf wird das Bild entsprechend gestreckt oder gestaucht
contain
- Das Bild behält sein Seitenverhältnis bei, wird jedoch so angepasst, dass es in die angegebene Dimension passt
cover
- Das Bild behält sein Seitenverhältnis und füllt die angegebene Dimension aus. Das Bild wird passend zugeschnitten
none
- Die Größe des Bildes wird nicht geändert
verkleinert
- das Bild ist herunterskaliert auf die kleinste Version von none
oder enthalten
Wenn wir object-fit: cover;
verwenden, behält das Bild sein Seitenverhältnis und füllt die angegebene Dimension aus. Das Bild wird passend zugeschnitten:
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Wenn wir object-fit: include;
verwenden, behält das Bild sein Seitenverhältnis, wird aber in der Größe angepasst, damit es in die angegebene Dimension passt:
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Using object-fit: contain</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Wenn wir object-fit: fill;
verwenden, wird die Größe des Bildes geändert, um die angegebene Dimension auszufüllen. Bei Bedarf wird das Bild gestreckt oder gestaucht, damit es passt:
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Using object-fit: fill</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Wenn wir object-fit: none;
verwenden, wird die Größe des Bildes nicht geändert:
img {
width: 200px;
height:
300px;
object-fit: none;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Using object-fit: none</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Wenn wir object-fit: scale-down;
verwenden, wird das Bild auf die kleinste Version von none
verkleinert oder enthalten
:
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Using object-fit: scale-down</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Hier haben wir zwei Bilder und wir möchten, dass sie die Breite von 50 % des Browserfensters und 100 % der Höhe ausfüllen.
Im folgenden Beispiel verwenden wir NICHT object-fit
, sodass das Seitenverhältnis der Bilder zerstört wird, wenn wir die Größe des Browserfensters ändern:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>
</body>
</html>
Im nächsten Beispiel verwenden wir object-fit: cover;
. Wenn wir also die Größe des Browserfensters ändern, bleibt das Seitenverhältnis der Bilder erhalten:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>
Das folgende Beispiel zeigt alle möglichen Werte der Eigenschaft object-fit
in einem Beispiel:
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
</body>
</html>
In der folgenden Tabelle sind die CSS-Objekt-*-Eigenschaften aufgeführt:
Gibt an, wie die Größe eines <img> oder <video> geändert werden soll, damit es in seinen Container passt
Gibt an, wie ein <img> oder <video> mit x/y positioniert werden soll Koordinaten innerhalb einer „eigenen Inhaltsbox“