How to Make Images Responsive with CSS

Responsive images automatically adjust to display an image based on the user’s device. They are used to fit the size of 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 to 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:

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

If you want a responsive image, but up to a limit, use the max-width property. It will indicate the image width in pixels, maximum 100% of the width of its container. It means the following (considering that your image width is 300px):

  • If the container is 200px, the image will be 300px (max-width: 100%).
  • If the container is 300px, the image will be 300px (max-width: 100%).
  • If the container is 1400px, the image will remain 300px.

There are fixed items, i.e. a fixed navigation menu, for which we will need to set a specific height. Most of the time, the height and the width are in symmetry. If the width of an image is reduced to adapt to the responsive, the height will be reduced too. If the width is fixed, the height will be fixed too.

Let’s see an example to visualize what we have said for responsive images.

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

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

If you want to set multiple images, you will need the srcset attribute. The srcset defines the set of images that will be allowed to the browser to choose between.

To work properly, we recommend using the srcset attribute with the <picture> element, not the <img>.

Let’s examine an example where multiple images are set and see how they are changed when the specific screen width is defined.

Example of creating multiple responsive images:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" 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:50%;">
    </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>

How to make background images responsive

There are 3 methods of making images responsive.

  1. 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:

<!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>
  1. 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:

<!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>
  1. 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:

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