Styling replaced elements

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

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

Verwendung von CSS mit ersetzten Elementen

CSS behandelt ersetzte Elemente in einigen Fällen speziell, zum Beispiel bei der Berechnung von Abständen und einigen auto-Werten. Nur ersetzte Elemente können intrinsische Dimensionen haben. Einige ersetzte Elemente, aber nicht alle, haben 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 Dokumentstile normalerweise nicht den Inhalt der ersetzten Elemente, mit einigen Ausnahmen: Das CSS Images Modul enthält Eigenschaften, die die Positionierung des Inhalts des Elements innerhalb seines Rahmens steuern.

Steuerung der Objektposition innerhalb des Inhaltsrahmens

Das CSS Images Modul definiert zwei Eigenschaften, die verwendet werden können, um zu bestimmen, wie das innerhalb des ersetzten Elements enthaltene Objekt innerhalb des Rahmens des Elements 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 das Inhaltsobjekt des ersetzten Elements in den Rahmen des enthaltenen Elements eingepasst werden soll. Diese Eigenschaft definiert, wie Bilder, Videos und andere einbettbare Medienformate auf die Höhe und Breite des Inhaltsrahmens des ersetzten Elements reagieren. Wenn die Höhe, Breite oder das Seitenverhältnis eines Elements von der Ressource abweichen, die für das Element reservierten Raum besetzen wird, 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 enthalten oder die Ressource verzerren soll.

Wenn enthalten oder verkleinert, werden alle Bereiche des Rahmens, die nicht vom ersetzten Element abgedeckt werden, den Hintergrund des Elements zeigen.

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

Ein quadratisches Foto der progressiven Pride-Flagge, die in der Nähe eines Schornsteins weht.

Wenn wir das Bild, ein Quadrat mit einem Seitenverhältnis von 1:1, in einer Box von 100px x 300px (Seitenverhältnis 1:3) platzieren, wird das Bild standardmäßig die Box füllen und sich verzerren. Wir können die object-fit-Eigenschaft verwenden, um zu definieren, wie das Bild dargestellt werden soll, wenn es in eine Box mit unterschiedlicher Größe und anderem Seitenverhältnis gezwängt wird:

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 Höhe und Breite zu wechseln. 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 Inhaltsobjekts des ersetzten Elements innerhalb des Rahmen des Elements an.

Oft in Verbindung mit der object-fit-Eigenschaft verwendet, nimmt sie als Wert einen <position>-Wert, denselben Wertetyp wie für background-position.

css
img {
  object-position: bottom right;
}

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

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

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

Siehe auch