image-resolution CSS property
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die image-resolution CSS-Eigenschaft spezifiziert die intrinsische Auflösung aller Rasterbilder, die in oder auf dem Element verwendet werden. Sie wirkt sich auf Inhaltsbilder wie ersetzte Elemente und generierte Inhalte sowie auf dekorative Bilder wie background-image-Bilder aus.
Die Bildauflösung wird als Anzahl der Bildpixel pro Längeneinheit definiert, z. B. Pixel pro Inch. Standardmäßig nimmt CSS eine Auflösung von einem Bildpixel pro CSS-px-Einheit an; die image-resolution-Eigenschaft erlaubt jedoch, eine andere Auflösung anzugeben.
Syntax
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;
/* Global values */
image-resolution: inherit;
image-resolution: initial;
image-resolution: revert;
image-resolution: revert-layer;
image-resolution: unset;
Werte
<resolution>-
Gibt die intrinsische Auflösung explizit an.
from-image-
Verwendet die intrinsische Auflösung, wie sie vom Bildformat angegeben wird. Wenn das Bild keine eigene Auflösung angibt, wird die explizit angegebene Auflösung verwendet (falls vorhanden), andernfalls wird
1dppx(1 Bildpixel pro CSS-px-Einheit) als Standard verwendet. snap-
Wenn das Schlüsselwort
snapangegeben ist, wird die berechnete Auflösung auf den nächstgelegenen Wert gerundet, der ein Bildpixel auf eine ganze Zahl von Gerätepixeln abbilden würde. Wenn die Auflösung aus dem Bild entnommen wird, wird die verwendete intrinsische Auflösung wie die native Auflösung des Bildes entsprechend angepasst.
Hinweis: Da Vektorformate wie SVG keine intrinsische Auflösung haben, hat diese Eigenschaft keine Auswirkung auf Vektorbilder.
Formale Definition
| Anfangswert | 1dppx |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben mit Ausnahme von <resolution>, das möglicherweise durch den berechneten Wert für 'snap' geändert wird |
| Animationstyp | diskret |
Formale Syntax
image-resolution =
[ from-image || <resolution> ] &&
snap?
Beispiele
Einstellung einer hohen DPI für den Druck
Beim Drucken des Dokuments eine höhere Auflösung verwenden.
@media print {
.my-image {
image-resolution: 300dpi;
}
}
Verwendung der Bildauflösung mit Fallback
Verwendet die Auflösung aus dem Bild. Wenn das Bild keine Auflösung hat, wird 300dpi anstelle des Standards von 1dppx verwendet.
.my-image {
image-resolution: from-image 300dpi;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Images Module Level 4 # the-image-resolution |
Browser-Kompatibilität
Derzeit unterstützt kein Browser dieses Feature.
Siehe auch
- Andere bildbezogene CSS-Eigenschaften:
object-fit,object-position,image-orientation,image-rendering. - Chromium-Fehler: 1086473.