Resize Image in CSS

  1. Use the max-width and max-height Properties to Resize the Image in CSS
  2. Use the object-fit Property to Resize the Image in CSS
  3. Use the auto Value for Width and the max-height Property to Resize the Image in CSS

This article introduces methods to resize an image in CSS to fit them in a div proportionally, maintaining its height and width.

Use the max-width and max-height Properties to Resize the Image in CSS

Whenever we insert an image in HTML, the image occupies the total pixels of its size. If the image is inside a specific container, sometimes the size of the image can be greater than the container’s size. The image will cover more space on the screen; it will take areas from other elements. As a result, the webpage won’t follow our design, and it will be unattractive. To get rid of this problem, we can use the max-width and max-height CSS properties to auto-resize the image according to the size of the container. These properties set the maximum height and width of an element. If the content in the element has more width and height than the max-width and max-height properties, their sizes will be adjusted with the value of these properties. But, if their sizes are small, no effect takes place. We can set the max-height and max-width properties to an element, and thus, the elements inside the container will adjust their size.

For example, create a div with class cat in HTML. Inside the div insert an image using the <img> tag. In CSS, select the img tag and assign the proprties max-width and max-height to 100%. Then, select the cat class and give height and width of 200px and 200px.

In the example below, we have inserted a random image from LoremFlickr, which has 300px of width and height. But, the container cat has a height and width of 200px. As we used the max-height and max-width properties, the larger images shrink to the size of the container. Thus, we auto-resized the image.

Example Code:

<div class="cat">
    <img src="https://loremflickr.com/300/300" />
</div>
img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

Use the object-fit Property to Resize the Image in CSS

We can use the object-fit property in CSS to resize the image to fit its container. A container may be larger or smaller in size than the image. The property lets us fit the image or videos according to the size of the container. We can specify the way how the image fits using the object-fit property. The property takes the values like fill, contain, cover, none, and scale-down. We can use the contain value so that the larger image can shrink to the given dimension of the container.

For example, insert an image of 600px height and width using the img tag as in the first example. In CSS, select the tag and set the height and width to 100%. Use the contain value in the object-fit option. Then, select the cat class and give the height and width of 300px to the container.

Here, we inserted an image of a larger dimension than the size of the container. The image is 600px while the container is only 300px. Using the object-fit property, we can shrink the image to the dimensions of the container. Thus, we can auto-resize the image.

Example Code:

<div class="cat">
    <img src="https://loremflickr.com/400/400" />
</div>
img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

Use the auto Value for Width and the max-height Property to Resize the Image in CSS

We can use the auto value to the width and set the max-height property to specify the width of an image to fit in a container. We will shrink the height of the image to the height of the container. For example, insert an image as above in HTML and set the height of the container as 200px in CSS. Next, select the img tag, set the width to auto, and set the max-height property to 100%.

In the example below, the image has 400px of height and width initially. We have set the container’s height to 200px. The max-height property set to 100% shrinks the image to 200px. Thus, we resized the height of the image according to the height of the container.

Example Code:

<div class="cat">
    <img src="https://loremflickr.com/400/400" />
</div>
.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}
Contribute
DelftStack is a collective effort contributed by software geeks like you. If you like the article and would like to contribute to DelftStack by writing paid articles, you can check the write for us page.