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.