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-Eigenschaft von CSS legt fest, wie der Inhalt eines ersetzten Elements, wie ein <img> oder <video>, an die Größe seines Containers 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 Box-Elements mit der object-position-Eigenschaft ä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="/https/developer.mozilla.org/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888;
}

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 aus der nachstehenden Liste von Werten festgelegt.

Werte

contain

Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er innerhalb des Inhaltsbereichs des Elements passt. Das gesamte Objekt wird so angepasst, dass es in den Rahmen passt, während sein Seitenverhältnis beibehalten wird, sodass das Objekt "letterboxed" oder "pillarboxed" wird, wenn sein Seitenverhältnis nicht mit dem Seitenverhältnis des Rahmens übereinstimmt.

cover

Der ersetzte Inhalt wird so dimensioniert, dass sein Seitenverhältnis beibehalten wird, während er den gesamten Inhaltsbereich des Elements füllt. Wenn das Seitenverhältnis des Objekts nicht mit dem Seitenverhältnis seines Rahmens übereinstimmt, wird das Objekt zugeschnitten, um zu passen.

fill

Der ersetzte Inhalt wird so dimensioniert, dass er den Inhaltsbereich des Elements ausfüllt. Das gesamte Objekt wird den Rahmen komplett ausfüllen. Wenn das Seitenverhältnis des Objekts nicht mit dem Seitenverhältnis seines Rahmens übereinstimmt, wird das Objekt gedehnt, um zu passen.

none

Der ersetzte Inhalt wird nicht neu dimensioniert.

scale-down

Der Inhalt wird so dimensioniert, als ob none oder contain angegeben wäre, je nachdem, welches Ergebnis in einer kleineren konkreten Objektgröße resultieren 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

Siehe auch