Adjust the browser window size to observe how the image dynamically adjusts to fit the page.
When the width property is specified as a percentage and the height property is set to “auto,” the image becomes responsive, scaling proportionally to accommodate different screen sizes.
Example
| img { width: 100%; height: auto; } |
Observe that in the aforementioned example, the image can be enlarged beyond its original dimensions. In many scenarios, a preferable approach would be to utilize the max-width property instead.
When the max-width property is defined as 100%, the image will resize downward as necessary, ensuring it never exceeds its original dimensions when scaled.
Example
|
img { img { |
Example
|
img { |
Background images can also adjust to resizing and scaling.
Here, we’ll illustrate three distinct methods:
1. When the background-size property is configured as “contain,” the background image will scale to attempt fitting the content area while maintaining its aspect ratio—the proportional relationship between the image’s width and height.
Below is the CSS code:
Example
| div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } |
2. When the background-size property is specified as “100% 100%”, the background image will stretch to encompass the entire content area
Below is the corresponding CSS code:
Example
| div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-size: 100% 100%; border: 1px solid red; } |
3.When the background-size property is defined as “cover,” the background image will resize to cover the entirety of the content area. It’s important to note that the “cover” value maintains the aspect ratio, potentially resulting in some portion of the background image being clipped
Below is the CSS code:
Example
| div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-size: cover; border: 1px solid red; } |
Different Images for Different Devices
Displaying a large image on a large computer screen may be suitable, but impractical on smaller devices. Instead of loading a large image only to scale it down, which can increase load times unnecessarily, you can utilize media queries to present different images on various devices.
Below, there are two images—one large and one small—that will be shown on distinct devices:
Example
| /* For width smaller than 400px: */ body { background-image: url(‘img_smallflower.jpg’); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url(‘img_flowers.jpg’); } } |
You can utilize the media query min-device-width instead of min-width to assess the device width rather than the browser width. This ensures that the image remains consistent even when resizing the browser window:
Example
| /* For devices smaller than 400px: */ body { background-image: url(‘img_smallflower.jpg’); } /* For devices 400px and larger: */ @media only screen and (min-device-width: 400px) { body { background-image: url(‘img_flowers.jpg’); } } |
The HTML <picture> element offers greater flexibility to web developers when specifying image resources.
One common application of the <picture> element is for images in responsive designs. Rather than relying on a single image scaled to fit various viewport widths, multiple images can be provided to better adapt to different viewport sizes.
Similar to the <video> and <audio> elements, the <picture> element allows for setting up different sources, with the browser selecting the first suitable source based on its preferences:
Example
| <picture> <source srcset=”img_smallflower.jpg” media=”(max-width: 400px)”> <source srcset=”img_flowers.jpg”> <img src=”img_flowers.jpg” alt=”Flowers”> </picture> |
The srcset attribute is mandatory and specifies the image’s source.
While the media attribute is optional, it allows for the inclusion of media queries similar to those found in CSS @media rules.
Additionally, it’s advisable to include an <img> element for browsers that lack support for the <picture> element.
