object-fit

von 1 Mitwirkenden:

Ü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 *Value 'initial-object-fit' not found in DB*
  • Anwendbar auf *Value 'appliesto-object-fit' not found in DB*
  • Vererbt *Value 'inherited-object-fit' not found in DB*
  • Prozentwerte *Value 'percentage-object-fit' not found in DB*
  • Medium *Value 'media-object-fit' not found in DB*
  • Berechneter Wert *Value 'computed-object-fit' not found in DB*
  • Animierbar *Value 'animatable-object-fit' not found in DB*
  • Kanonische Reihenfolge *Value 'order-object-fit' not found in DB*

Syntax

Formale Syntax:  Syntax nicht in der Datenbank gefunden!
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änkungauf 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 Image Values and Replaced Content Module Level 4
Die Definition von 'object-fit' in dieser Spezifikation.
Arbeitsentwurf Die Schlüsselwörter from-image und flip wurden hinzugefügt.
CSS Image Values and Replaced Content Module Level 3
Die Definition von 'object-fit' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Spezifikation

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 31.0 36 (36) Nicht unterstützt 11.60-o
19.0
(Ja)
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung 4.4.4 36 (36) Nicht unterstützt 11.5-o
24
(Ja)

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,