CSS Responsive Images

CSS Responsive Images

Responsive images adapt to the space available in a responsive layout. CSS can prevent images from overflowing their containers, preserve their proportions, control how they fill defined areas, and adjust their presentation as the layout changes.

A common starting point is to allow an image to shrink when necessary while preventing it from becoming wider than its natural size.

Why Images Need to Be Responsive

An image can be wider than the space available to it. If its dimensions are not allowed to adapt, the image may overflow its container and create horizontal scrolling on smaller screens.

img {
  width: 900px;
}

An image with this fixed width requires 900 CSS pixels of horizontal space. If its container is narrower, the image can extend beyond the container.

Responsive CSS allows the displayed dimensions of an image to adapt to the available layout space.

Using max-width

A common technique is to give images a maximum width of 100 percent.

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

The max-width: 100% declaration prevents the displayed image from becoming wider than its containing block when its intrinsic width would otherwise be larger.

Because this is a maximum rather than a required width, an image that is naturally smaller than its container does not have to stretch to fill the available space.

Using height: auto

When an image's width is allowed to change, height: auto allows the browser to calculate its displayed height from its intrinsic aspect ratio.

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

This helps preserve the image's proportions as it becomes narrower.

Setting both width and height to unrelated fixed values can distort an image.

img {
  width: 400px;
  height: 100px;
}

If those dimensions do not match the image's aspect ratio, the image is stretched or compressed to fit them unless another sizing technique is used.

Using width: 100%

The width: 100% declaration makes an image use the full width of its containing block.

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

This differs from max-width: 100%. A width of 100 percent can enlarge an image when its container is wider than the image's intrinsic width, while a maximum width of 100 percent does not by itself require the image to fill the container.

Use width: 100% when the design calls for an image to fill the available width. Use max-width: 100% when the main goal is to keep an image from overflowing while allowing smaller images to remain smaller.

Images in Responsive Containers

Responsive images often receive their available width from a flexible container.

.image-container {
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

The container can grow and shrink with the layout while stopping at 700 pixels. The image fills the container and changes size with it.

The display: block declaration is often useful for layout images because it removes the inline baseline space that normally appears below an inline image.

Using object-fit

The object-fit property controls how replaced content such as an image is resized when both the width and height of its content box are defined.

.photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

The cover value preserves the image's aspect ratio while filling the entire content box. Parts of the image may be cropped when its proportions differ from the box.

.photo {
  width: 100%;
  height: 250px;
  object-fit: contain;
}

The contain value preserves the entire image within the content box. Empty space can remain when the proportions differ.

Using object-position

The object-position property controls the alignment of an image within its content box when properties such as object-fit affect how the image is displayed.

.photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center top;
}

In this example, the image fills the box using cover and is positioned toward the top rather than using the default centered position.

This can help keep an important part of an image visible when cropping occurs.

Images and aspect-ratio

The aspect-ratio property can define the preferred proportions of an image box or its surrounding container.

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

This creates a consistent 16:9 image area. If the image has different intrinsic proportions, object-fit: cover allows it to fill the area while preserving the image's own proportions and cropping as necessary.

For images that should simply retain their natural proportions while their width changes, height: auto is usually sufficient.

Responsive Background Images

CSS background images use different sizing controls from HTML <img> elements.

.hero {
  min-height: 400px;
  background-image: url("images/landscape.jpg");
  background-size: cover;
  background-position: center;
}

The cover value scales the background image to cover the background positioning area while preserving its proportions. Some of the image may extend beyond the visible area.

Background images are generally appropriate for decorative presentation. Images that convey meaningful document content are normally better represented with HTML image elements so they can provide appropriate alternative text and participate in responsive image selection.

HTML Responsive Image Features

CSS controls how an image is displayed in the layout, while HTML also provides features that allow the browser to select among different image resources.

The srcset and sizes attributes can provide multiple image candidates so the browser can choose an appropriate resource for the current conditions.

<img src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Mountain landscape">

The <picture> element can provide additional source selection, including art direction and alternative image formats.

These HTML features solve a different problem from CSS sizing. HTML can help determine which image resource is loaded, while CSS determines how that image is sized and presented within the layout.

Responsive Image Practices

CSS Responsive Images Example

The following example allows an image to fill its responsive container without overflowing it.

.image-container {
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

The container uses 80 percent of the available width until it reaches its 700-pixel maximum. The image uses the full width of that container while its height adjusts automatically to preserve its proportions.

Open the example in the editor and change the container width or maximum width. Drag the divider between the code and result panes to change the preview width and see how the image responds.