CSS-Eigenschaft object-fit
Die Eigenschaft object-fit wird verwendet, um anzugeben, wie die Größe eines Elements angepasst werden soll, damit es in seinen Inhaltsbereich passt.
Die Eigenschaft object-fit ermöglicht es, den Inhalt eines Bildes an die im Stylesheet angegebenen Abmessungen anzupassen.
Der Inhalt kann mithilfe der Eigenschaftswerte so skaliert werden, dass er in die angegebene Breite und Höhe hineinpasst, vergrößert oder verkleinert, gestaucht oder gestreckt wird. Es gibt fünf Werte:
- fill
- contain
- cover
- none
- scale-down
| Initial Value | fill |
|---|---|
| Applies to | Replaced elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.objectFit = "cover"; |
Syntax
CSS object-fit syntax
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Beispiel für die Eigenschaft object-fit mit dem Wert "fill":
Beispiel für die Eigenschaft object-fit mit dem Wert "fill":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Ergebnis
Hier wird das Bild mit dem angewendeten Wert gestreckt, um den Bereich auszufüllen. Im nächsten Beispiel schneidet der Wert "cover" die Seiten eines Bildes ab, behält das Seitenverhältnis bei und füllt außerdem den verfügbaren Platz aus.
Beispiel für die Eigenschaft object-fit mit dem Wert "cover":
Beispiel für die Eigenschaft object-fit mit dem Wert "cover":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Im folgenden Beispiel hat das Bild mit dem angewendeten Wert das Seitenverhältnis des Originalbildes.
Beispiel für die Eigenschaft object-fit mit dem Wert "contain":
Beispiel für die Eigenschaft object-fit mit dem Wert "contain":<
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>In unserem letzten Beispiel wird das angewendete Wert das Bild in einer kleineren Größe festgelegt, als ob "contain" oder "none" angegeben worden wären.
Beispiel für die Eigenschaft object-fit mit dem Wert "scale-down":
CSS object-fit scale-down example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Werte
| Value | Description |
|---|---|
| fill | Der Inhalt wird so weit wie möglich skaliert, um den Inhaltsbereich auszufüllen. Dies ist der Standardwert dieser Eigenschaft. |
| contain | Das Seitenverhältnis des Inhalts wird so weit wie möglich skaliert, bleibt dabei jedoch innerhalb der Grenzen des Elements. |
| cover | Das Seitenverhältnis des Inhalts wird so festgelegt, dass der Inhaltsbereich des Elements ausgefüllt wird. Der Inhalt wird zugeschnitten, um in den Inhaltsbereich zu passen. |
| none | Kein skalierten Inhalt. |
| scale-down | Dasselbe wie die Werte none oder contain. Der Inhalt des Elements wird in einer kleineren Größe angezeigt. |
| initial | Verwendet für die Eigenschaft ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What are the possible values for the 'object-fit' property in CSS?