Styling von ersetzten Elementen
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 in die Eigenschaften ein, die nur für ersetzte Elemente gelten.
Ein ersetztes Element ist ein Element, dessen Darstellung außerhalb des Geltungsbereichs von CSS liegt; es handelt sich um externe Objekte, deren Darstellung unabhängig vom CSS-Formatierungsmodell ist. Einige ersetzte Elemente, wie etwa <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, z. B. bei der Berechnung von Margen und einigen auto-Werten. Nur ersetzte Elemente können jemals innere Dimensionen haben. Einige ersetzte Elemente, aber nicht alle, haben innere Dimensionen oder eine definierte Basislinie, die von einigen CSS-Eigenschaften wie vertical-align verwendet wird.
Obwohl 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-Bilder-Modul enthält Eigenschaften, die die Kontrolle der Positionierung des Inhalts des Elements innerhalb seines Rahmens unterstützen.
Steuerung der Objektposition innerhalb des Inhaltsrahmens
Das CSS-Bilder-Modul definiert zwei Eigenschaften, die verwendet werden können, um anzugeben, wie das Objekt innerhalb des ersetzten Elements innerhalb des Rahmens positioniert werden soll. Die object-fit-Eigenschaft wird zur Größenanpassung von Objekten verwendet, während die object-position-Eigenschaft zur Positionierung genutzt wird.
Die object-fit-Eigenschaft
Die object-fit-Eigenschaft legt fest, wie das Inhaltsobjekt des ersetzten Elements an den umgebenden Elementrahmen angepasst werden soll. Die Eigenschaft definiert, wie Bilder, Videos und andere einbettbare Medienformate auf die Höhe und Breite des Inhaltsrahmens 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 ausfüllen, das Asset innerhalb des Raums enthalten oder die Ressource verzerren soll.
Wenn eingepasst oder herunterskaliert, zeigen alle Bereiche des Rahmens, die nicht vom ersetzten Element bedeckt sind, den Hintergrund des Elements.
Die object-fit-Eigenschaft hat keine Wirkung auf <iframe>, <embed> und <fencedframe>-Elementen.
Wenn wir das Bild, ein Quadrat mit einem Seitenverhältnis von 1:1, in ein 100px x 300px großen Rahmen (Seitenverhältnis 1:3) einfügen, wird das Bild standardmäßig den Rahmen ausfüllen und sich dabei verzerren. Wir können die object-fit-Eigenschaft verwenden, um zu definieren, wie das Bild gerendert werden soll, wenn es in einen Rahmen mit unterschiedlicher Größe und Seitenverhältnis gezwängt wird:
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;
}
Markieren Sie das Kästchen, um die Werte für Höhe und Breite festzulegen. Beachten Sie, dass nur der fill-Wert (der Standardwert) das Originalbild verzerrt. Bei allen anderen Werten bleibt das innere Seitenverhältnis des Bildes erhalten.
Die object-position-Eigenschaft
Die object-position-Eigenschaft legt die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Rahmens fest.
Häufig in Verbindung mit der object-fit-Eigenschaft verwendet, nimmt sie als Wert einen <position>-Wert an, derselbe Wertetyp, der auch für background-position verwendet wird.
img {
object-position: bottom right;
}
Sie kann ohne object-fit verwendet werden. In diesem Fall wird das Bild in seiner inneren Größe (218px x 218px) gerendert, wobei die Position des Bildinhalts durch den object-position-Wert festgelegt wird.
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
- Verständnis von Seitenverhältnissen
- CSS-Bilder Modul
- CSS-Anzeige Modul
- CSS-Hintergründe und Rahmen Modul