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 z.B. eines <img> oder <video>, an seinen Container angepasst werden soll.

Hinweis: Die object-fit Eigenschaft hat keine Auswirkungen auf <iframe>, <embed>, und <fencedframe> Elemente.

Sie können die Ausrichtung des Inhaltobjekts des ersetzten Elements innerhalb der Box des 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="/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 ein einzelnes Schlüsselwort aus der folgenden Liste von Werten angegeben.

Werte

contain

Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er in die Inhaltsbox des Elements passt. Das gesamte Objekt wird so angepasst, dass es die Box ausfüllt, sein Seitenverhältnis jedoch beibehält, sodass das Objekt "letterboxed" oder "pillarboxed" wird, wenn sein Seitenverhältnis nicht mit dem der Box übereinstimmt.

cover

Der ersetzte Inhalt wird so dimensioniert, dass sein Seitenverhältnis beibehalten wird, während er die gesamte Inhaltsbox des Elements ausfüllt. Wenn das Seitenverhältnis des Objekts nicht mit dem der Box übereinstimmt, wird das Objekt abgeschnitten, um zu passen.

fill

Der ersetzte Inhalt wird dimensioniert, um die Inhaltsbox des Elements auszufüllen. Das gesamte Objekt füllt die Box vollständig aus. Wenn das Seitenverhältnis des Objekts nicht mit dem der Box übereinstimmt, wird das Objekt gestreckt, um zu passen.

none

Der ersetzte Inhalt wird nicht skaliert.

scale-down

Der Inhalt wird so dimensioniert, als ob none oder contain angegeben wäre, je nachdem, was zu einer kleineren konkreten Objektgröße führen würde.

Formale Definition

Anfangswertfill
Anwendbar aufersetzte Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formaler Syntax

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

Beispiele

object-fit für ein Bild setzen

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