Responsive Web Design - Images

Using the width property

If width The property is set to a percentage, and the height is set to "auto", the image will respond to zoom in or out:

Example

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

Try it yourself

Please note that in the above example, the image can be scaled up to be larger than its original size. In most cases, a better solution is to switch to using max-width property.

Using the max-width property

If the max-width property is set to 100%, the image will shrink as needed but will never be scaled up to be larger than its original size:

Example

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

Try it yourself

Add an image to the instance web page

Example

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

Try it yourself

Background image

The background image can also respond to resizing and scaling.

These are the three different methods we demonstrate:

1. If you set background-size The background image will be scaled and will try to match the content area if the property is set to "contain". However, the image will maintain its aspect ratio (the proportional relationship between the image's width and height):

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

This is the CSS code:

Example

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

Try it yourself

3. If background-size If the attribute is set to "cover", the background image will scale to cover the entire content area. Note that the "cover" value maintains the aspect ratio and may crop part of the background image:

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

Prepare different images for different devices

The large image can be displayed perfectly on large computer screens but is not useful on small devices. Why load a large image when you have to shrink it? To reduce load or for any other reason, you can use media queries to display different images on different devices.

This is a large image and a small image that will be displayed on different devices:

Example

/* For widths less than 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* For widths of 400 pixels or larger: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Try it yourself

You can use media queries min-device-width instead of min-width to check the device width instead of the browser width. Then, when you adjust the size of the browser window, the image will not change:

Example

/* For devices with less than 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* For devices with 400 pixels and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Try it yourself

HTML5 <picture> element

HTML5 introduces <picture> element, which allows you to define multiple images.

Browser support

38.0 13 38.0 9.1 25.0

<picture> The function of the element is similar to <video> and <audio> Elements. We set different sources, and the first source with matching priority is the source currently in use:

Example

<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 yourself

srcset The attribute is required, it defines the source of the image.

media The attribute is optional, it accepts values that can be CSS @media Rule Find media queries.

Tip:You should also specify for browsers that do not support <picture> Browser Definitions of Elements <img> Elements.