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 spezifiziert die intrinsische Auflösung aller Rasterbilder, die im oder auf dem Element verwendet werden. Sie betrifft Inhaltsbilder wie ersetzte Elemente und generierte Inhalte sowie dekorative Bilder wie background-image Bilder.

Die Bildauflösung wird als Anzahl der Bildpunkte pro Längeneinheit definiert, z.B. Pixel pro Zoll. Standardmäßig nimmt CSS eine Auflösung von einem Bildpunkt pro CSS-Px-Einheit an; jedoch ermöglicht die image-resolution Eigenschaft, eine andere Auflösung anzugeben.

Syntax

css
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>

Spezifiziert die intrinsische Auflösung explizit.

from-image

Verwendet die durch das Bildformat angegebene intrinsische Auflösung. Wenn das Bild seine eigene Auflösung nicht spezifiziert, wird die explizit angegebene Auflösung verwendet (falls gegeben), andernfalls wird 1dppx (1 Bildpunkt pro CSS-Px-Einheit) als Standard verwendet.

snap

Wenn das Schlüsselwort snap angegeben ist, ist die berechnete Auflösung die spezifizierte Auflösung, gerundet auf den nächsten Wert, der einen Bildpunkt auf eine ganze Anzahl von Gerätepixeln abbilden würde. Wenn die Auflösung vom Bild übernommen wird, ist die verwendete intrinsische Auflösung die entsprechend angepasste native Auflösung des Bildes.

Hinweis: Da Vektorformate wie SVG keine intrinsische Auflösung haben, hat diese Eigenschaft keinen Einfluss auf Vektorbilder.

Formale Definition

Anfangswert1dppx
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben mit Ausnahme von <resolution>, das möglicherweise durch den berechneten Wert für 'snap' geändert wird
Animationstypdiskret

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.

css
@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, verwenden Sie 300 dpi anstelle des Standards von 1dppx.

css
.my-image {
  image-resolution: from-image 300dpi;
}

Spezifikationen

Specification
CSS Images Module Level 4
# the-image-resolution

Browser-Kompatibilität

Kein Browser unterstützt derzeit diese Eigenschaft.

Siehe auch