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 zum Beispiel eines <img> oder <video>, angepasst werden soll, um in seinen Container zu passen.

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 der Box des Elements mit der Eigenschaft object-position ä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 ein einzelnes Schlüsselwort aus der untenstehenden Liste von Werten angegeben.

Werte

contain: Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis zu bewahren, während er innerhalb der Inhaltsbox des Elements passt. Das gesamte Objekt wird so eingefügt, dass es die Box füllt und dabei sein Seitenverhältnis beibehält. Wenn das Seitenverhältnis des Objekts nicht mit dem der Box übereinstimmt, wird das Objekt "letterboxed" oder "pillarboxed".
cover: Der ersetzte Inhalt wird so bemessen, dass er sein Seitenverhältnis beibehält, 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 beschnitten, um zu passen.
fill: Der ersetzte Inhalt wird so bemessen, dass er die Inhaltsbox des Elements füllt. Das gesamte Objekt wird die Box vollständig ausfüllen. 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 bemessen, als wäre none oder contain angegeben, je nachdem, welche Option eine 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

Einstellen 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