Image resolution property (image-resolution)

The CSS3 image-resolution property defines the built in resolution of an image used in or on an element. It has effect on both the content of an image as well as the background of it.

Syntax:

selector {

}

Values:

The image-resolution property accepts following values:

from-image; Uses EXIF data from the image itself (image's built-in resolution). In case that is un-determined, the default will be '1ddpx'.
resolution; Specifies the wanted resolution to be applied with the dot representing a single image pixel.
snap; The specified resolution is rounded to the nearest value that would map one image pixel to an integer number of device pixels.
initial, inherit

Example

The example with image-resolution property and resolution snap value:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h5 {
    margin:-2px 0px 10px;
}
span {
    position: relative; top:0px; left:10px; 
    width: auto; height: auto;
}
img#ex1 {
    width: 140px; height: auto;
}
img#ex2 {
    width: 140px; height: auto;
    image-resolution: 200dpi snap;
        -webkit-image-resolution:200dpi snap;
        -moz-image-resolution:200dpi snap;
        -o-image-resolution:200dpi snap;
        -ms-image-resolution:200dpi snap;
}
</style>
</head>
  
<body>

<h5>This property is no also adopted well by browsers, but more importantly, it needs some dynamic changes to be made in order to see how it works.</h5>
<div>
<span><img src="../../../img/tutorials/css_gallery_ex2s.jpg" alt="ex1" id="ex1" /><strong> original</strong></span><br />
<span><img src="../../../img/tutorials/css_gallery_ex2s.jpg" alt="ex2" id="ex2" /><strong> resolution</strong></span><br />
</div>
</body>
</html>

›› go to examples ››

Image resolution property (image-resolution)

Syntax:

Values:

Example

The example with image-resolution property and resolution snap value:

Comments

About

Contact

Get Connected