object-fit

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie z.B. ein <img> oder <video>, in seiner Containerbox angepasst werden soll.

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

Sie können die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb der Elementbox mit der object-position-Eigenschaft verä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 spezifiziert, das aus der untenstehenden Liste von Werten ausgewählt wird.

Werte

contain: Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er in die Content-Box des Elements passt. Das gesamte Objekt wird so angepasst, dass es die Box ausfüllt und dabei sein Seitenverhältnis beibehält. Daher wird das Objekt "letterboxed" oder "pillarboxed", wenn sein Seitenverhältnis nicht mit dem der Box übereinstimmt.
cover: Der ersetzte Inhalt wird so dimensioniert, dass er sein Seitenverhältnis beibehält und dabei die gesamte Content-Box des Elements ausfüllt. Wenn das Seitenverhältnis des Objekts nicht mit dem der Box übereinstimmt, wird das Objekt zugeschnitten, um zu passen.
fill: Der ersetzte Inhalt wird dimensioniert, um die Content-Box des Elements auszufüllen. Dies ist der initial-Wert. Das gesamte Objekt füllt komplett die Box aus. Wenn das Seitenverhältnis des Objekts nicht mit dem der Box übereinstimmt, dann wird das Objekt angepasst, um zu passen.
none: Der ersetzte Inhalt wird nicht angepasst.
scale-down: Der Inhalt wird so dimensioniert, als ob none oder contain angegeben wäre, je nachdem, was in einer kleineren konkreten Objektgröße resultiert.

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

Spezifikation
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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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