How to Make Images Responsive with CSS

Responsive images automatically adjust their size based on the user’s device to fit the screen.

Setting the width of the image

The easiest way to make images responsive is defining the width for the <img> element. Setting the width makes the image adapt to its container. If it is within an article, it will take up 100% of the article width.

Example of creating a responsive image:

Example of creating a responsive image | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Responsive image example</h2>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
  </body>
</html>

Try it Yourself »

If you want a responsive image that scales down but never exceeds its original size, use the max-width property. Setting max-width: 100% allows the image to adapt to its container while preventing it from scaling larger than its natural dimensions. For example, if your image is 300px wide:

If the container is 200px, the image scales down to 200px.
If the container is 300px, the image displays at 300px.
If the container is 1400px, the image remains 300px.

To maintain the image's aspect ratio when the width changes, set the height to auto. This ensures the height scales proportionally with the width, preventing distortion.

Let’s look at an example to see how this works in practice.

Example of creating a responsive image using the max-width and height properties:

Example of creating a responsive image using the max-width and height properties | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h2>Responsive image example with max-width and height</h2>
    <div>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
    </div>
  </body>
</html>

Try it Yourself »

To provide multiple image versions for different screen sizes, use the srcset attribute. The srcset defines a set of images for the browser to choose from.

To work properly, we recommend using the <picture> element with  XFI6  tags that include the srcset attribute, instead of relying on a single <img> tag.

Let’s examine an example to see how the browser selects the appropriate image based on screen width.

Example of creating multiple responsive images:

Example of creating multiple responsive images | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width: 100%; height: auto;" />
    </picture>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

How to make background images responsive

There are 3 methods of making images responsive.

When 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 the proportional relationship between the image's width and height.

Example of making a background image responsive using the background-size property with the "contain" value:

Example of making a background image responsive using the background-size property with the "contain" value | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div.img-block {
        width: 100%;
        height: 450px;
        background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid black;
      }
      h1 {
        padding: 0 10px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <p>Resize the browser window to see the effect.</p>
    <div class="img-block">
      <h1>Your Background Image</h1>
    </div>
  </body>
</html>

Try it Yourself »

When the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area.

Example of making a background image responsive using the background-size property with percentages:

Example of making a background image responsive using the background-size property with percentages | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div.img-block {
        width: 100%;
        height: 450px;
        background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-size: 100% 100%;
        border: 1px solid black;
      }
      h2 {
        padding: 0 10px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <p>Resize the browser window to see the effect.</p>
    <div class="img-block">
      <h2>
        Your background Image
      </h2>
    </div>
  </body>
</html>

Try it Yourself »

When the background-size property is set to "cover", the background image will scale to cover the entire content area. Note that some parts of the background image may be clipped.

Example of making a background image responsive using the background-size property with the "cover" value:

Example of making a background image responsive using the background-size property with the "cover" value | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div.img-block {
        width: 100%;
        height: 450px;
        background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-size: cover;
        border: 1px solid red;
      }
      h2 {
        padding: 0 10px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <p>Resize the browser window to see the effect.</p>
    <div class="img-block">
      <h2>Your background Image</h2>
    </div>
  </body>
</html>

Try it Yourself »

Note: For better responsiveness, consider using relative units or the aspect-ratio property instead of fixed pixel heights in your layout.