CSS - image-resolution

Quiz

Description

The image-resolution property in CSS is used to control the way an image is displayed on different devices with varying resolution capabilities.

It allows you to specify the resolution of the image and control image rendering, especially when scaling an image to fit different screen resolutions.

The property can have following values:

from-image: Image resolution is derived from its own intrinsic resolution, ignoring any CSS resolution settings.
snap: The specified resolution is rounded to the nearest value that maps one image pixel to an integer number of device pixels.
<resolution>: Intrinsic resolution value specified.

Applies to

All the HTML elements.

DOM Syntax

object.style.imageResolution = "300dpi snap";

Example

Here is an example:

<html>
<head>
<style>
   img {
      width: 300px;
      height: 200px;
      margin-right: 0.5in;
   }
</style>
</head>
<body>
   <h2>Image Resolution dots per inch</h2>
   <h3>500dpi</h3>
   <img style="image-resolution: 500dpi;" src="images/pink-flower.jpg" alt="500dpi">
</body>
</html>

Please note that the image-resolution property may not have a visible effect on all devices or browsers, as it largely depends on the device's screen resolution and the image's original resolution.

Print Page