object-fit
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die object-fit
CSS Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie etwa einem <img>
oder <video>
, in seinen Container skaliert werden soll.
Hinweis: Die object-fit
-Eigenschaft hat keine Wirkung auf <iframe>
, <embed>
und <fencedframe>
-Elemente.
Sie können die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Element-Boxs mit der object-position
Eigenschaft verändern.
Probieren Sie es aus
Syntax
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;
Die object-fit
Eigenschaft wird als einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.
Werte
contain
-
Der ersetzte Inhalt wird so skaliert, dass sein Seitenverhältnis beibehalten wird, während er in die Inhaltsbox des Elements passt. Das gesamte Objekt wird so positioniert, dass es die Box füllt, wobei das Seitenverhältnis beibehalten wird, sodass das Objekt "letterboxed" oder "pillarboxed" wird, wenn sein Seitenverhältnis nicht dem Seitenverhältnis der Box entspricht.
cover
-
Der ersetzte Inhalt wird so dimensioniert, dass sein Seitenverhältnis beibehalten wird, während das gesamte Inhaltsfeld des Elements gefüllt wird. Wenn das Seitenverhältnis des Objekts nicht mit dem Seitenverhältnis seiner Box übereinstimmt, wird das Objekt beschnitten, um zu passen.
fill
-
Der ersetzte Inhalt wird so dimensioniert, dass er die Inhaltsbox des Elements ausfüllt. Das gesamte Objekt wird die Box vollständig ausfüllen. Wenn das Seitenverhältnis des Objekts nicht mit dem Seitenverhältnis seiner Box übereinstimmt, wird das Objekt gedehnt, um zu passen.
none
-
Der ersetzte Inhalt wird nicht skaliert.
scale-down
-
Der Inhalt wird so dimensioniert, als ob
none
odercontain
angegeben wären, je nachdem, was zu einer kleineren konkreten Objektgröße führen würde.
Formale Definition
Initialer Wert | fill |
---|---|
Anwendbar auf | ersetzte Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Festlegen von object-fit für ein Bild
HTML
<section>
<h2>object-fit: fill</h2>
<img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: contain</h2>
<img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: cover</h2>
<img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: none</h2>
<img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>
CSS
h2 {
font-family:
Courier New,
monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
margin: 10px 0;
}
.narrow {
width: 100px;
height: 150px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Images Module Level 3 # the-object-fit |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere bildbezogene CSS-Eigenschaften:
object-position
,image-orientation
,image-rendering
,image-resolution
. background-size
- Verständnis von Seitenverhältnissen