Definition and Usage
The 'image-resolution' property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as 'background-image').
| Name: | image-resolution |
|---|---|
| Value: | [from-image || <resolution>] && snap? |
| Initial: | 1dppx |
| Applies to: | all elements |
| Inherited: | yes |
| Media: | visual |
| Computed value: | as specified, except with ' |
Syntax
image-resolution : [from-image ||] && snap?
Values
- '
<resolution>' - Specifies the intrinsic resolution explicitly. A "dot" in this case corresponds to a single image pixel.
- '
from-image' - The image's intrinsic resolution is taken as that specified by the
image format. If the image does not specify its own resolution, the
explicitly specified resolution is used (if given), else it defaults to
'
1ddpx'. - '
snap' - If the "snap" keyword is provided, the computed '
<resolution>' (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.
Examples
img.high-res {
image-resolution: 300dpi;
}
img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }
img { image-resolution: snap from-image; }
