Übersicht
Die object-fit
CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.
Initialwert | fill |
---|---|
Anwendbar auf | ersetzte Elemente |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
fill | contain | cover | none | scale-down
object-fit: fill
object-fit: contain
object-fit: cover
object-fit: none
object-fit: scale-down
Werte
fill
- Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.
contain
- Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.
cover
- Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.
none
- Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.
scale-down
- Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.
Beispiel
HTML Inhalt
<div> <h2>object-fit: fill</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> <h2>object-fit: contain</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> <h2>object-fit: cover</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> <h2>object-fit: none</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> <h2>object-fit: scale-down</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> </div>
CSS Inhalt
h2 { font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 450px; } img { width: 150px; height: 100px; border: 1px solid #000; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }
Ausgabe
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Images Module Level 4 Die Definition von 'object-fit' in dieser Spezifikation. |
Arbeitsentwurf | Die Schlüsselwörter from-image und flip wurden hinzugefügt. |
CSS Images Module Level 3 Die Definition von 'object-fit' in dieser Spezifikation. |
Anwärter Empfehlung | Ursprüngliche Spezifikation |
Browser Kompatibilität
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
object-fit | Chrome Vollständige Unterstützung 31 | Edge
Vollständige Unterstützung
16
| Firefox Vollständige Unterstützung 36 | IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
19
| Safari Vollständige Unterstützung 10 | WebView Android Vollständige Unterstützung 4.4.3 | Chrome Android Vollständige Unterstützung 31 | Firefox Android Vollständige Unterstützung 36 | Opera Android
Vollständige Unterstützung
19
| Safari iOS Vollständige Unterstützung 10 | Samsung Internet Android Vollständige Unterstützung Ja |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Siehe Implementierungshinweise.
- Siehe Implementierungshinweise.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Siehe auch
- Andere Bild bezogene CSS Eigenschaften:
object-position
,image-orientation
,image-rendering
,image-resolution
.