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 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 sind externe Objekte, deren Darstellung unabhängig von dem CSS-Formatierungsmodell ist. Einige ersetzte Elemente, wie <iframe>-Elemente, können eigene Stylesheets haben, aber sie übernehmen 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 Rändern und einigen auto-Werten. Nur ersetzte Elemente können intrinsische Dimensionen haben. Einige, aber nicht alle ersetzten Elemente, haben intrinsische Dimensionen oder eine definierte Basislinie, die von einigen CSS-Eigenschaften wie vertical-align verwendet wird.
Obwohl die 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 umfasst Eigenschaften, die die Positionierung des Inhalts innerhalb des Rahmens des Elements steuern.
Steuerung der Objektposition innerhalb des Inhaltsrahmens
Das CSS-Bilder-Modul definiert zwei Eigenschaften, mit denen spezifiziert werden kann, 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 bestimmt, wie das Inhaltsobjekt des ersetzten Elements an den Rahmen des enthaltenen Elements 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 Höhe, Breite oder Seitenverhältnis eines Elements von der Ressource unterscheiden, die den Raum belegen wird, reservieren die Werte fill, contain, cover, scale-down und none, ob der Browser die Ressource skalieren, den zugeteilten Raum bedecken, das Asset innerhalb des Raums halten oder die Ressource verzerren soll.
Wenn das Objekt enthalten oder herunterskaliert wird, werden alle Bereiche des Rahmens, die nicht vom ersetzten Element abgedeckt sind, den Hintergrund des Elements anzeigen.
Die object-fit-Eigenschaft hat keine Wirkung auf <iframe>, <embed> und <fencedframe>-Elemente.
Wenn wir das Bild, ein Quadrat mit einem 1:1-Seitenverhältnis, in einem 100px x 300px Rahmen (1:3 Seitenverhältnis) platzieren, füllt das Bild standardmäßig den Rahmen, indem es sich verzerrt. Wir können die object-fit-Eigenschaft verwenden, um festzulegen, wie das Bild gerendert werden soll, wenn es in einen Rahmen mit unterschiedlicher Größe und unterschiedlichen Seitenverhältnissen 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;
}
Aktivieren 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 intrinsische Seitenverhältnis des Bildes erhalten.
Die object-position-Eigenschaft
Die object-position-Eigenschaft spezifiziert die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Rahmens des Elements.
Häufig in Verbindung mit der object-fit-Eigenschaft verwendet, hat sie als Wert einen <position>-Wert, derselbe Werttyp wie bei background-position.
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 des Inhalts des Bildes durch den object-position-Wert festgelegt wird.
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
- Verständnis von Seitenverhältnissen
- CSS-Bilder Modul
- CSS-Display Modul
- CSS Hintergründe und Rahmen Modul