Responsive Web Design -Images

Using the width property

If the width property is set to 100%, the image will be responsive according to the upper and lower bounds:

Example

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

Note that in the above example, the image will be larger than its original size. We can usemax-widthThis property solves this problem well.

Using the max-width property

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

Example

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

Try it Yourself »

Add images to a web page

Example

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

Try it Yourself »

Background Images

Background images can be responsively resized or scaled.

The following are three different methods:

1. If the background-size property is set to "contain", the background image will adapt to the content area proportionally. The image maintains its aspect ratio:

This 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;
}

Try it Yourself »

2. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire area:

Example

This is the CSS code:

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

Try it Yourself »

3. If the background-size property is set to "cover", the background image will be expanded enough to completely cover the background area. Note that this property maintains the image's aspect ratio, so some parts of the background image may not be displayed in the background positioning area.

This is the CSS code:

Example

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

Try it Yourself »

Different devices display different images

Large images can be displayed on large screens, but they may not display well on small screens. There is no need to load large images on small screens, as this affects loading speed. Therefore, we can use media queries to display different images on different devices.

The following large image and small image will be displayed on different 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');
    }
}

Try it Yourself »

You can use min-device-width in media queries instead of the min-width property. This will detect the device width rather than the browser width. When the browser size is reset, the image size will not change.

Example

/* Devices smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* Devices greater than 400px (or equal): */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

Try it Yourself »

HTML5 <picture> Element

HTML5's<picture>The element can be set with multiple images.

Browser Support

element
<picture>	Not supported	38.0	38.0	Not supported	25.0

<picture>The element is similar to<video>and<audio>The element. Different resources can be provided, with the first set resource being the preferred one:

Example

Try it Yourself »

srcsetThe attribute is required and defines the image resource.

mediaThe attribute is optional and can be used in media queries.CSS @media RuleView details.

For those that do not support<picture>The element's browser you can also define.<img>Use an element instead.

other extensions