image-resolution
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 gibt die intrinsische Auflösung aller Rasterbilder an, die in oder auf dem Element verwendet werden. Sie beeinflusst Inhaltsbilder wie ersetzte Elemente und generierte Inhalte sowie dekorative Bilder wie background-image Bilder.
Die Bildauflösung wird als Anzahl der Bildpixel pro Längeneinheit definiert, z. B. Pixel pro Zoll. Standardmäßig nimmt CSS eine Auflösung von einem Bildpixel pro CSS-Px-Einheit an; jedoch ermöglicht die image-resolution Eigenschaft die Angabe einer anderen Auflösung.
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 durch das Bildformat spezifiziert wurde. Wenn das Bild keine eigene Auflösung angibt, wird die explizit angegebene Auflösung verwendet (falls vorhanden), andernfalls wird standardmäßig
1dppx(1 Bildpixel pro CSS-Px-Einheit) verwendet. snap-
Wenn das Schlüsselwort
snapangegeben ist, wird die berechnete Auflösung auf den nächsten Wert gerundet, der ein Bildpixel auf eine ganzzahlige Anzahl von Gerätepixeln abbilden würde. Wenn die Auflösung aus dem Bild genommen wird, ist die verwendete intrinsische Auflösung die native Auflösung des Bildes, ähnlich angepasst.
Hinweis: Da Vektorformate wie SVG keine intrinsische Auflösung haben, hat diese Eigenschaft keinen Effekt 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 verwenden Sie eine höhere Auflösung.
@media print {
.my-image {
image-resolution: 300dpi;
}
}
Bildauflösung mit Fallback verwenden
Verwendet die Auflösung aus dem Bild. Wenn das Bild keine Auflösung hat, verwenden Sie 300dpi anstelle des Standardwerts 1dppx.
.my-image {
image-resolution: from-image 300dpi;
}
Spezifikationen
| Specification |
|---|
| CSS Images Module Level 4> # the-image-resolution> |
Browser-Kompatibilität
Derzeit unterstützt kein Browser diese Funktion.
Siehe auch
- Andere bildbezogene CSS-Eigenschaften:
object-fit,object-position,image-orientation,image-rendering. - Chromium-Bug: 1086473.