How to auto resize an image to fit within a DIV without stretching?
Tags: webdev, css, html, tutorial
Published: 2022-10-04 07:31:00

---
title: How to auto resize an image to fit within a DIV without stretching?
published: true
date: 2016-05-12 12:54:21 UTC
tags: webdev, css, html, tutorial
canonical_url: https://www.moreonfew.com/how-to-auto-resize-an-image-to-fit-within-a-div-without-stretching/
---

If you are developing a Responsive Webpage or a Fluid Web page, you would have definitely come across scenarios where you wanted to fit in a large image within a smaller DIV without distorting it or breaking the aspect ratio. Well, this can be done easily using the `max-width` property.

Let’s assume that I have an image which is 768px wide and I want to fit it within a DIV whose width is 320px. Let’s call the DIV as “figure-container” . To fit the image within the “figure-container” DIV, I should be using the `max-width` property to the image. Hence my CSS might look similar to the following :

```css
.figure-container img{ 
  max-width: 100%; 
  display: block; 
  height: auto 
}
```

This would ensure that the image’s width does not exceed 100% of the DIV’s width. Which means my image which was of 768px would now fit within the 320px DIV while maintaining the aspect-ratio too. However, please remember that depending on your scenario, you might have to use the `display` property too. You may set the display to `block` or `inline-block`.

The other way to do this is by using the object-fit property on the image.

## How to fit an image in div using CSS object-fit?

You can also use the `object-fit` property of CSS3 to fit your image within the parent DIV. All you have to do is to add the object-fit property to the image. The Object-fit property has 4 values, they are :

1. **fill** – This would stretch the image to fit the content box.  
2. **contain** – This would scale the image up or down to fill the content box while maintaining the aspect-ratio.  
3. **cover** – This would fill the content box with the image while maintaining the aspect-ratio, but might crop the image in this process.  
4. **none** – The image would retain its original dimensions.  
5. **scale-down** – The image would be sized like using the none or contain property while generating the smallest concrete object size.

```css
.figure-container img{
  width: 100%;
  height:100%;
  object-fit:contain; /* This can be one of the 5 values from above */
}
```

When you use the `object-fit` property to fit the image within the DIV, you would have to use it along with one of the `fill`, `cover` or `contain` value. However, please note that the support for `object-fit` across devices and browsers is still evolving so please do check for the browser support before you use it. There are a couple of [PolyFills](https://www.moreonfew.com/what-are-polyfills-in-javascript/) available for object-fit, however please try those out before you actually go ahead and use it on a live site.

The post [How to auto resize an image to fit within a DIV without stretching?](https://www.moreonfew.com/how-to-auto-resize-an-image-to-fit-within-a-div-without-stretching/) first appeared on [MoreOnFew](https://www.moreonfew.com).