Gestaltung ersetzter Elemente
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 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 Strukturmodell von CSS ist. Einige ersetzte Elemente, wie z. B. <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, beispielsweise bei der Berechnung von Rändern und einigen auto-Werten. Nur ersetzte Elemente können jemals intrinsische Dimensionen haben. Einige ersetzte Elemente, aber nicht alle, haben intrinsische Dimensionen oder eine definierte Basislinie, die von einigen CSS-Eigenschaften genutzt wird, wie z.B. vertical-align.
Während Dokumentenstile die Größe und Position ersetzter Elemente festlegen können, beeinflussen sie nicht den Inhalt der ersetzten Elemente, mit einigen Ausnahmen: Das CSS-Bildmodul umfasst Eigenschaften, die die Steuerung der Positionierung des Inhalts des Elements innerhalb seines Rahmens unterstützen.
Steuerung der Objektposition innerhalb des Inhaltsrahmens
Das CSS-Bildmodul definiert zwei Eigenschaften, die verwendet werden können, um anzugeben, wie das Objekt innerhalb des ersetzten Elements innerhalb des Rahmenbereichs des Elements positioniert werden soll. Die Eigenschaft object-fit wird zum Skalieren von Objekten verwendet, während die Eigenschaft object-position zur Positionierung verwendet wird.
Die Eigenschaft object-fit
Die Eigenschaft object-fit gibt an, wie das Inhaltsobjekt des ersetzten Elements in den umgebenden Rahmen des Elements eingepasst 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 reservierten Raum für das Element einnimmt, definieren die Werte fill, contain, cover, scale-down und none, ob der Browser die Ressource skalieren, den zugewiesenen Raum abdecken, das Asset im Raum enthalten oder die Ressource verzerren soll.
Wenn etwas enthalten oder herunterskaliert wird, werden alle Bereiche des Rahmens, die nicht vom ersetzten Element abgedeckt werden, den Hintergrund des Elements anzeigen.
Die Eigenschaft object-fit hat keine Auswirkungen auf <iframe>, <embed> und <fencedframe>-Elemente.
Wenn wir das Bild, ein Quadrat mit einem Seitenverhältnis von 1:1, in eine Box von 100px x 300px (Seitenverhältnis 1:3) einfügen, wird das Bild standardmäßig den Rahmen ausfüllen und sich dabei verzerren. Wir können die Eigenschaft object-fit verwenden, um zu definieren, wie das Bild gerendert werden soll, wenn es in einen Rahmen mit einer anderen Größe und einem anderen Seitenverhältnis gezwungen 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 zu wechseln. Beachten Sie, dass nur der Wert fill (der Standard) das ursprüngliche Bild verzerrt. Mit allen anderen Werten bleibt das intrinsische Seitenverhältnis des Bildes erhalten.
Die Eigenschaft object-position
Die Eigenschaft object-position gibt die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Rahmenbereichs des Elements an.
Oft in Verbindung mit der object-fit-Eigenschaft verwendet, nimmt sie als Wert einen <position>-Wert an, derselbe Werttyp, der auch fürbackground-position verwendet wird.
img {
object-position: bottom right;
}
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 Wert object-position festgelegt wird.
img {
outline: 2px solid;
object-position: 114px 72px;
}
Die Eigenschaft object-position 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