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 CSS Eigenschaft bestimmt, wie der Inhalt eines ersetzten Elements, wie z.B. einem <img> oder <video>, skaliert 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 des Elementkastens 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 Einzel-Keyword angegeben, das aus der untenstehenden Werteliste ausgewählt wird.

Werte

contain: Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er in den Inhaltbereich des Elements passt. Das gesamte Objekt wird so skaliert, dass es den Kasten ausfüllt, wobei das Seitenverhältnis beibehalten wird. Wenn es nicht mit dem Seitenverhältnis des Kastens übereinstimmt, wird es "letterboxed" oder "pillarboxed".
cover: Der ersetzte Inhalt wird so bemessen, dass er sein Seitenverhältnis beibehält und den gesamten Inhaltbereich des Elements ausfüllt. Wenn das Seitenverhältnis des Objekts nicht mit dem des Kastens übereinstimmt, wird das Objekt beschnitten, um zu passen.
fill: Der ersetzte Inhalt wird so bemessen, dass er den Inhaltbereich des Elements vollständig ausfüllt. Das gesamte Objekt wird den Kasten vollständig füllen. Wenn das Seitenverhältnis des Objekts nicht mit dem des Kastens übereinstimmt, wird das Objekt gestreckt, um zu passen.
none: Der ersetzte Inhalt wird nicht skaliert.
scale-down: Der Inhalt wird so bemessen, als ob none oder contain angegeben wäre, je nachdem, welches eine kleinere konkrete Objektgröße verursachen würde.

Formale Definition

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

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 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