Responsive images are images that adjust smoothly to accommodate any browser size.
When the CSS width property is configured to 100%, the image becomes responsive, allowing it to resize proportionally to both larger and smaller dimensions.
Example
| <img src=”img_girl.jpg” style=”width:100%;”> |
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 shrink if necessary, but it won’t enlarge beyond its original dimensions.
Example
| <img src=”img_girl.jpg” style=”max-width:100%;height:auto;”> |
The HTML <picture> element enables you to specify varying images for different browser window sizes.
Adjust the browser window size to observe how the image below adapts based on the width.
Example
| <picture> <source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”> <source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”> <source srcset=”flowers.jpg”> <img src=”img_smallflower.jpg” alt=”Flowers”> </picture> |