Styling von ersetzten Elementen

Einige CSS-Eigenschaften gelten für alle Elemente, einige nur für Grid- und Flex-Container, andere wiederum nur für transformierbare Elemente. Dieser Leitfaden führt die Eigenschaften ein, die nur für ersetzte Elemente gelten.

Ein ersetztes Element ist ein Element, dessen Darstellung außerhalb des CSS-Bereichs liegt; sie sind externe Objekte, deren Darstellung unabhängig vom CSS-Formatierungsmodell ist. Einige ersetzte Elemente, wie <iframe>-Elemente, können eigene Stylesheets haben, erben jedoch nicht die Stile des übergeordneten Dokuments.

Verwendung von CSS mit ersetzten Elementen

CSS behandelt in einigen Fällen ersetzte Elemente spezifisch, beispielsweise bei der Berechnung von Margen und einigen auto-Werten. Nur ersetzte Elemente können jemals intrinsische Dimensionen haben. Einige, aber nicht alle ersetzten Elemente, besitzen intrinsische Dimensionen oder eine definierte Basislinie, die von einigen CSS-Eigenschaften wie vertical-align verwendet wird.

Während Dokumentstile die Größe und Position von ersetzten Elementen festlegen können, beeinflussen sie nicht den Inhalt der ersetzten Elemente, mit einigen Ausnahmen: Das CSS-Bildermodul beinhaltet Eigenschaften, die die Positionierung des Inhalts innerhalb seines Kastens steuern können.

Steuerung der Objektposition innerhalb des Inhaltkastens

Das CSS-Bildermodul definiert zwei Eigenschaften, mit denen festgelegt werden kann, wie das innerhalb des ersetzten Elements enthaltene Objekt innerhalb des Kastens positioniert werden soll. Die object-fit-Eigenschaft wird verwendet, um Objekte zu skalieren, während die object-position-Eigenschaft verwendet wird, um sie zu positionieren.

Die `object-fit`-Eigenschaft

Die object-fit-Eigenschaft gibt an, wie der Inhaltsgegenstand des ersetzten Elements an den umgebenden Kasten angepasst werden soll. Die Eigenschaft legt fest, wie Bilder, Videos und andere einbettbare Medienformate auf die Höhe und Breite des Inhaltkastens des ersetzten Elements reagieren. Wenn sich die Höhe, Breite oder das Seitenverhältnis eines Elements von der Ressource unterscheidet, die den für das Element reservierten Raum einnimmt, definieren die Werte fill, contain, cover, scale-down und none, ob der Browser die Ressource skalieren, den zugewiesenen Raum abdecken, die Ressource innerhalb des Raums einpassen oder die Ressource verzerren soll.

Wenn der Inhalt enthalten oder herunterskaliert wird, zeigen alle nicht abgedeckten Bereiche des Kastens den Hintergrund des Elements.

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

Wenn wir das Bild, ein Quadrat mit einem Seitenverhältnis von 1:1, in ein 100px x 300px Rechteck (Seitenverhältnis 1:3) einfügen, füllt das Bild standardmäßig den Kasten und verzerrt sich dabei. Wir können die object-fit-Eigenschaft verwenden, um festzulegen, wie das Bild dargestellt werden soll, wenn es in einen Kasten mit unterschiedlicher Größe und Seitenverhältnis gezwungen wird:

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<p>
  <label><input type="checkbox" /> Change dimensions</label>
</p>

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  grid-auto-flow: column;
  max-width: 98%;
  margin: 10px auto 0;
}
img {
  width: 100px;
  height: 300px;
  outline: 2px solid purple;
}
body:has(:checked) img {
  width: 300px;
  height: 100px;
}

css

img:nth-of-type(1) {
  object-fit: fill;
}
img:nth-of-type(2) {
  object-fit: cover;
}
img:nth-of-type(3) {
  object-fit: contain;
}
img:nth-of-type(4) {
  object-fit: scale-down;
}
img:nth-of-type(5) {
  object-fit: none;
}
img:nth-of-type(6) {
  /* no object-fit property */
  outline: 2px dashed red;
}

Aktivieren Sie das Kontrollkästchen, um die Werte für Höhe und Breite festzulegen. Beachten Sie, dass nur der fill-Wert (der Standardwert) das ursprüngliche Bild verzerrt. Bei allen anderen Werten bleibt das intrinsische Seitenverhältnis des Bildes erhalten.

Die `object-position`-Eigenschaft

Die object-position-Eigenschaft gibt die Ausrichtung des Inhaltsgegenstandes des ersetzten Elements innerhalb des Kastens an.

Oft in Verbindung mit der object-fit-Eigenschaft verwendet, nimmt sie als Wert einen <position>-Wert an, den gleichen Werttyp, der auch für background-position verwendet wird.

css

img {
  object-position: bottom right;
}

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

Sie kann ohne object-fit verwendet werden. In diesem Fall wird das Bild in seiner intrinsischen Größe (218px x 218px) gerendert, wobei die Position des Bildinhalts durch den object-position-Wert festgelegt wird.

img {
  margin: 10px 0 0 10px;
}

css

img {
  outline: 2px solid;
  object-position: 114px 72px;
}

Die object-position-Eigenschaft funktioniert genauso gut mit <iframe>, <video> und <embed>-Elementen wie mit <img>.

Siehe auch

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