How to Auto-Resize the Image to fit an HTML Container

It is not complicated to make the image stretch to fit the <div> container. CSS makes it possible to resize the image so as to fit an HTML container. To auto-resize an image or a video, you can use various CSS properties, which are described in this tutorial. It’s very easy if you follow the steps described below.

Let’s see an example and try to discuss each part of the code.

Create HTML

  • Create a <div> element with a class "box".
  • Set the URL of your image in the <img> tag with the src attribute and specify the alt attribute as well.
<body>
  <div class="box"> 
    <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1"  alt="Example image"/> 
  </div>
</body>

Add CSS

.box {
  width: 30%;
  height: 200px;
  border: 5px dashed #f7a239;
}

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

Let’s bring the code parts together and see how it works! Here is the result of our code.

Example of auto-resizing an image with the width and height properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 30%;
        height: 200px;
        border: 5px dashed #f7a239;
      }
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" alt="Example image"/>
    </div>
  </body>
</html>

In the example below, we use the "cover" value of the object-fit property. When using the "cover" value, the aspect ratio of the content is sized while filling the element's content box. It will be clipped to fit the content box.

Example of resizing an image using the object-fit property set to “cover”:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 60%;
        height: 300px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="https://images.unsplash.com/photo-1581974267369-3f2fe3b4545c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
    </div>
  </body>
</html>

See another example where the image size is set manually, and the object-fit property is set as well. In this case, when the browser is resized, the image will preserve its aspect ratio and won’t be resized according to the container.

Example of resizing an image using the object-fit property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        text-align: center;
      }
      img {
        width: 400px;
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <img src="https://images.unsplash.com/photo-1581974267369-3f2fe3b4545c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image">
  </body>
</html>

In the next example, we use the max-width and max-height properties. The max-height property sets the maximum height of an element, and the max-width property sets the maximum width of an element. To resize an image proportionally, set either the height or width to "100%", but not both. If you set both to "100%", the image will be stretched.

Example of auto-resizing an image with the max-width and max-height properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        max-width: 100%;
        max-height: 100%;
      }
      div {
        border: 2px dotted #000000;
      }
      .portrait {
        height: 100%;
        width: 40px;
      }
      .landscape {
        height: 100%;
        width: 80px;
      }
      .square {
        height: 100%;
        width: 100px;
      }
    </style>
    <body>
      <p>Portrait Div</p>
      <div class="portrait">
        <img src="http://i.stack.imgur.com/xkF9Q.jpg" alt="Circle portrait">
      </div>
      <p>Landscape Div</p>
      <div class="landscape">
        <img src="http://i.stack.imgur.com/xkF9Q.jpg" alt="Circle landscape">
      </div>
      <p>Square Div</p>
      <div class="square">
        <img src="http://i.stack.imgur.com/xkF9Q.jpg" alt="Circle square">
      </div>
    </body>
</html>

To use an image as a CSS background, use the background-size property. This property offers two special values: contain and cover. Let's see examples with these values.

Example of resizing an image using the background-size property set to “contain”:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 250px;
        background-image: url("https://images.unsplash.com/photo-1582093236149-516a8be696fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

In the next example, the image is cropped.

Example of resizing an image using the background-size property set to “cover”:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 250px;
        background-image: url("https://images.unsplash.com/photo-1582093236149-516a8be696fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
Do you find this helpful?

Related articles