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

css
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 oder contain angegeben wären, je nachdem, was zu einer kleineren konkreten Objektgröße führen würde.

Formale Definition

Anfangswertfill
Anwendbar aufersetzte Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down

Beispiele

Festlegen von object-fit für ein Bild

HTML

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

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