Responsive Web Design – Images.
updated 2026-03-20
One solution is to use the max-width property
example:
max-width: 100%;
height: auto;
The most common viewport pixel widths for smartphones are
360px to 414px, with 360px, 375px, 390px, and 412px being dominant in 2025–2026. While physical screen resolutions are often higher (1080px or higher), viewport widths are designed to make content legible on smaller screens. Standard widths often include 360-393px for Android and 375-430px for iPhones.
note: The most common viewport widths for Samsung Galaxy phones are 360px and 412px
background images
If the background-size property is set to “contain”, the background image will scale, and try to fit the content area, and the image will keep its aspect ratio.
ex:
div
{ width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
}
If the background-size property is set to “cover”, the background image will scale to cover the entire content area. Notice that the “cover” value keeps the aspect ratio, and some part of the background image may be clipped:
background-image: url('img_flowers.jpg');
background-size: cover;
If the background-size property is set to “100% 100%”, the background image will stretch to cover the entire content area:
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices.
Here is one large image and one smaller image that will be displayed on different devices:
/* For width smaller than 420px: */
body
{ background-image: url('img_smallflower.jpg');
}
/* For width 420px and larger: */
@media only screen and (min-width: 420px)
{ body
{ background-image: url('img_flowers.jpg');
}
}
You can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window:
/* For devices smaller than 420px: */
body
{ background-image: url('img_smallflower.jpg');
}
/* For devices 420px and larger: */
@media only screen and (min-device-width: 420px)
{ body
{ background-image: url('img_flowers.jpg');
}
}
Alternately,
HTML5 <picture> Element
HTML5 introduced the <picture> element, which lets you define more than one image.
<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 required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in CSS @media rule.
You should also define an <img> element for obsolete browsers [like internet explorer] that do not support the <picture> element.