Responsive Web Design – Images
Using The width Property
An image that has the width property set to a percentage and the height property set to “auto” will scale up and down on demand.
Example
img {
width: 100%;
height: auto;
}
It is possible to enlarge the image in the example above beyond its initial dimensions by applying a scaling technique. In many circumstances, using the max-width attribute will be a superior option.
Using The max-width Property
The image will resize to fit if necessary if the max-width property is set to 100%, but it will never enlarge to fill the screen:
Example
img {
max-width: 100%;
height: auto;
}
Add an Image to The Example Web Page
Example
img {
width: 100%;
height: auto;
}
Background Images
Scaling and resizing background pictures is also possible.
Here, we’ll demonstrate three distinct approaches:
- The background picture will scale and attempt to fit the content area if the background-size parameter is set to “contain”. The picture will maintain its aspect ratio, or the proportionate relationship between its width and height, though:
Here 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. The background picture will stretch to fill the content area if the background-size parameter is set to “100% 100%”:
Here is the CSS code:
Example
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. The background picture will resize to fill the full content area if the background-size parameter is set to “cover”. You’ll see that the aspect ratio is maintained by the “cover” setting, albeit some of the background picture may be cropped:
Here 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
On a huge computer screen, a large image might be ideal, but worthless on a small device. If you are going to scale down an image anyhow, why load a large one? For any other purpose, or to lighten the load, you can utilize media queries to show alternative images on various devices.
These two images, one large and one little, will be shown on various 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');
}
}
Alternatively, you can use the media query min-device-width, which examines the width of the device rather than the browser. Then, when you resize the browser window, the image will remain unchanged:
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
Web developers now have greater flexibility in defining image resources thanks to the HTML <picture> element.
The <picture> element is most frequently used for images that are a part of responsive designs. Multiple images can be designed to fill the browser viewport more attractively than one image that is scaled up or down based on the viewport width.
The <video> and <audio> elements function similarly to the <picture> element. Once many sources are configured, the first one that best suits your preferences is used:
Example
<picture>
<source data-lazy-srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source data-lazy-srcset="img_flowers.jpg">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers" title="Responsive Web Design - Images 6" data-lazy-src="img_flowers.jpg"><noscript><img decoding="async" src="img_flowers.jpg" alt="Flowers" title="Responsive Web Design - Images 6"></noscript>
</picture>
The srcset element, which indicates the image’s source, is necessary.
The media attribute, which takes media queries from the CSS @media rule, is optional.
For browsers that do not support the <picture> element, you should also define a <img> element.
