image-resolution
image-resolution CSS 屬性指定了在元素中或元素上使用的所有柵格影像的固有解析度。它影響內容影像（如替換元素和生成內容）以及裝飾性影像（如 background-image 影像）。
影像解析度定義為每單位長度的影像畫素數量，例如，每英寸的畫素數量。預設情況下，CSS 假定每個 CSS px 單位有一個影像畫素的解析度；但是，image-resolution 屬性允許指定不同的解析度。
語法
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;
值
<resolution>-
顯式指定固有解析度。
from-image-
使用影像格式指定的固有解析度。如果影像未指定其自身的解析度，則使用顯式指定的解析度（如果已給出），否則預設為
1dppx（每個 CSS px 單位 1 個影像畫素）。 snap-
如果提供了
snap關鍵字，則計算出的解析度是指定解析度四捨五入到最近的值，該值將一個影像畫素對映到整數個裝置畫素。如果解析度取自影像，則使用的固有解析度是影像的原始解析度，並以類似方式進行調整。
注意：由於 SVG 等向量格式沒有固有解析度，此屬性對向量影像沒有影響。
正式定義
正式語法
image-resolution =
[ from-image || <resolution> ] &&
snap?
示例
為列印設定高 dpi
列印文件時，使用更高的解析度。
css
@media print {
.my-image {
image-resolution: 300dpi;
}
}
使用帶有備用方案的影像解析度
使用影像的解析度。如果影像沒有解析度，則使用 300dpi 而不是預設的 1dppx。
css
.my-image {
image-resolution: from-image 300dpi;
}
規範
| 規範 |
|---|
| CSS 影像模組第 4 級 # the-image-resolution |
瀏覽器相容性
目前沒有瀏覽器支援此功能。
另見
- 其他與影像相關的 CSS 屬性：
object-fit、object-position、image-orientation、image-rendering。 - Chromium bug: 1086473.