Images.md

< Previous     Next >

---

width

If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down:

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

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

max-width

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

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

Background Images

Background images can also respond to resizing and scaling.
Here we will show three different methods:
1. If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):

Here is the CSS code:

div {
  width: 100%;
  height: 400px;
  background-image: url('//i.imgur.com/m0caW4s.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 content area:

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 scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:

Here is the CSS code:

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

Different Sizes Between Browsers

A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices.

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

You can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window:

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

Using the <picture> Element

The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below change depending on the width:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>