object-fit CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie zum Beispiel eines <img>- oder <video>-Elements, an seine Containergröße angepasst 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 Boxmodells des Elements mit der Eigenschaft object-position ändern.
Probieren Sie es aus
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>
#example-element {
height: 100%;
width: 100%;
border: 2px dotted #888888;
}
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;
Werte
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
contain-
Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er in die Content-Box des Elements passt. Das gesamte Objekt wird daran angepasst, die Box zu füllen, während sein Seitenverhältnis beibehalten wird; daher wird das Objekt "letterboxed" oder "pillarboxed", wenn sein Seitenverhältnis nicht dem der Box entspricht.
cover-
Der ersetzte Inhalt wird so skaliert, dass das Seitenverhältnis beibehalten wird, während die gesamte Content-Box des Elements gefüllt wird. Wenn das Seitenverhältnis des Objekts nicht dem der Box entspricht, wird das Objekt beschnitten, um zu passen.
fill-
Der ersetzte Inhalt wird so skaliert, dass die Content-Box des Elements komplett gefüllt wird. Dies ist der
initial-Wert. Das gesamte Objekt wird die Box vollständig ausfüllen. Wenn das Seitenverhältnis des Objekts nicht dem der Box entspricht, wird das Objekt gestreckt, um zu passen. none-
Der ersetzte Inhalt wird nicht skaliert.
scale-down-
Der Inhalt wird so skaliert, als ob
noneodercontainangegeben wäre, je nachdem, welches zu einer kleineren konkreten Objektgröße führt.
Formale Definition
| Anfangswert | fill |
|---|---|
| Anwendbar auf | ersetzte Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
object-fit =
fill |
none |
[ contain | cover ] || scale-down
Beispiele
Einstellen 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 black;
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
| Spezifikation |
|---|
| CSS Images Module Level 3 # the-object-fit |
Browser-Kompatibilität
Siehe auch
- Andere bildbezogene CSS-Eigenschaften:
object-position,image-orientation,image-rendering,image-resolution. background-size- Verständnis von Seitenverhältnissen