图像分辨率

实验性： 这是 实验性技术
在生产环境中使用之前，请仔细检查 浏览器兼容性表。

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;

Values

<resolution>

显式指定固有分辨率。

from-image

使用图像格式指定的固有分辨率。如果图像未指定自己的分辨率，则使用显式指定的分辨率（如果已给出），否则默认为 1dppx（每个 CSS px 单位 1 个图像像素）。

snap

如果提供 snap 关键字，则计算的分辨率是指定的分辨率，四舍五入到最接近的值，该值将一个图像像素映射到整数个设备像素。如果分辨率取自图像，则使用的固有分辨率是类似调整后的图像的本机分辨率。

注意：由于 SVG 等矢量格式没有固有分辨率，因此此属性对矢量图像无效。

正式定义

初始值1dppx
适用范围所有元素
继承是
计算值如指定，但 <resolution> 可能因“snap”值的计算而更改
动画类型离散

正式语法

image-resolution = 
  [ from-image || <resolution> ]  &&
  snap?

示例

为打印设置高 dpi

打印文档时，使用更高分辨率。

css
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}

使用带有回退的图像分辨率

使用图像中的分辨率。如果图像没有分辨率，使用 300dpi 而不是默认的 1dppx。

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

规范

规范
CSS Images 模块 Level 4
# the-image-resolution

浏览器兼容性

目前没有浏览器支持此属性。

另请参阅