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 ⁨Januar 2020⁩.

Die object-fit-Eigenschaft von CSS legt fest, wie der Inhalt eines ersetzten Elements, wie ein <img> oder <video>, an seine Containergröße angepasst werden soll.

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

Sie können die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Box-Modells 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 #888888;
}

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 festgelegt, 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 innerhalb des Inhaltsbereichs des Elements passt. Das gesamte Objekt wird so angepasst, dass es die Box füllt, wobei das Seitenverhältnis beibehalten wird. Wenn das Seitenverhältnis des Objekts nicht mit dem des Rahmens übereinstimmt, wird es "letterboxed" oder "pillarboxed".
cover: Der ersetzte Inhalt wird so dimensioniert, dass sein Seitenverhältnis beibehalten wird, während der gesamte Inhaltsbereich des Elements gefüllt wird. Wenn das Seitenverhältnis des Objekts nicht mit dem des Rahmens übereinstimmt, wird das Objekt beschnitten, um zu passen.
fill: Der ersetzte Inhalt wird so dimensioniert, dass der gesamte Inhaltsbereich des Elements gefüllt wird. Das gesamte Objekt wird die Box vollständig ausfüllen. Wenn das Seitenverhältnis des Objekts nicht mit dem des Rahmens übereinstimmt, wird das Objekt gestreckt, um zu passen.
none: Der ersetzte Inhalt wird nicht skaliert.
scale-down: Der Inhalt wird dimensioniert, als ob none oder contain angegeben worden wäre, je nachdem, welches die kleinere konkrete Objektgröße ergibt.

Formale Definition

Anfangswert	`fill`
Anwendbar auf	ersetzte Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

object-fit = 
  fill                               |
  none                               |
  [ contain | cover ] || 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 black;
  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

Andere bildbezogene CSS-Eigenschaften: object-position, image-orientation, image-rendering, image-resolution.
background-size
Verständnis von Seitenverhältnissen

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden