Posts in current category

Responsive Web Design - Pictures


May 04, 2021 00:00 CSS


Table of contents


Responsive Web Design - Pictures


Use the width property

If the width property is set to 100%, the picture implements responsive functionality based on the upper and lower ranges:

Img {
width: 100%;
height: auto; }

Try it out . . .

Note that in the above example, the picture will be bigger than its original picture. We can use max-width to solve this problem very well.


Use the max-width

If the max-width is set to 100%, the picture will never be larger than its original size:

Img {
max-width: 100%;
height: auto; }

Try it out . . .

Tip: For max-width properties, refer to the CSS max-width properties section of this site's CSS reference manual.


Add a picture to the page

Img {
width: 100%;
height: auto; }

Try it out . . .

Background picture

The background picture can respond to resizing or zooming.

Here are three different approaches:

1. If the background-size is contain the background picture will be proportionally adaptive to the content area. The picture remains proportional:

This is the CSS code:

Div {
background-repeat: no-repeat;
background-size: contain; }

Try it out . . .

2. If the background-size property is set to "100% 100%", the background picture extends across the region:

This is the CSS code:

Div {
background-size: 100% 100%; }

Try it out . . .

3. If the background-size is cover the background image is extended to be large enough for the background image to completely cover the background area. Note that this property maintains the scale of the picture so that parts of the background image cannot be displayed in the background positioning area.

This is the CSS code:

div {
background-size: cover;
border: 1px solid red; }

Try it out . . .

Different devices display different pictures

Large pictures can be displayed on the big screen, but they don't really look good on the small screen. W e don't have to load big pictures on the small screen, which affects the loading speed. So we can use media queries to display different pictures depending on the device.

The following large and small pictures will appear on different devices:

Responsive Web Design - Pictures Responsive Web Design - Pictures

/* 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'); } }

Try it out . . .

You can use the min-device-width min-width property, which detects the width of the device rather than the width of the browser. The picture size does not change when the browser size is reset.

/? Device less than 400px:
body {
background-image: url('img_smallflower.jpg'); }
The device is greater than 400px (also equal to):
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg'); } }

Try it out . . .

HTML5 and picture elements

HTML5's and picture's elements can set up multiple pictures.

Browser support

Elements Responsive Web Design - Pictures Responsive Web Design - Pictures Responsive Web Design - Pictures Responsive Web Design - Pictures Responsive Web Design - Pictures
< picture > Not supported 38.0 38.0 Not supported 25.0
< The picture and element are similar to the elements of the <video> <audio> You can device different resources, and the first set of resources is preferred:
< picture >
< source srcset= "img_smallflower.jpg" media= "(max-width: 400px)" >
< source srcset= "img_flowers.jpg" >
< img src= "img_flowers.jpg" alt= "Flowers" >
< /picture >

Try it out . . .

srcset property is necessary to define the picture resource.

media property is optional and can be viewed in the CSS @media media query for details.

For browsers that do not support the element, you can also define the <img> to replace it.


Extended reading

Responsive Pictures 101: Describes why responsive pictures are needed and how to choose the right responsive picture solution.