Responsive Web Design - Images

Using the width Property

If the width property is set to 100%, the image will be responsive and scale up and down:

Example

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

Note that in the above example, the image can be scaled up to be larger than its original size. However, using the max-width property fixes this problem.

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

Adding an Image to the Website

Example

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

Background Images

Background images can be responsive too and scale based on the size of the screen.

Here are three different methods:

1. If the background-size property is set to "contain", the background image will scale proportionally to fit within the content area while maintaining its aspect ratio:

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. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire area:

Example

Here is the CSS code:

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

3. If the background-size property is set to "cover", the background image will be resized to cover the entire area, ensuring the aspect ratio is maintained, but parts of the image may not be visible within the background positioning area.

Here is the CSS code:

Example

Displaying Different Images for Different Devices

Large images can be displayed on large screens but may not display well on small screens. There is no need to load large images on small screens, as this can affect load times. Therefore, we can use media queries to display different images based on the device.

Here, a large image and a small image will be displayed on different devices:

Example

You can use the min-device-width instead of the min-width property in media queries, which checks the device width rather than the browser width. The image size will not change when the browser size is reset.

Example

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

The HTML5 <picture> Element

The HTML5 <picture> element allows for multiple images to be specified.

Browser Support

The <picture> element is similar to the <video> and <audio> elements. It allows for different resources to be specified, with the first resource being the preferred one:

Example

<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 image resources.

The media attribute is optional and can be found in detail in the CSS @media rule.

For browsers that do not support the <picture> element, you can also define an <img> element as a fallback.