# CSS: Resize an Image to Fit a Div Container

> Make an image fill its container without distortion using the CSS object-fit property, with examples for both the contain and cover values

**URL:** https://sentry.io/answers/how-do-i-auto-resize-an-image-to-fit-a-div-container/

---

## The Problem

You have a `<div>` container with its own width and height. For example, your HTML might look like this:

```html
<div class="container">
  <img src="cat.jpg" alt="a cat">
</div>
```

How do you make the image fill its container?

## The Solution

First, we make the image fill its container by setting its width and height to 100%:

```css
.container img {
  height: 100%;
  width: 100%;
}
```

This makes the image fit, but it will distort the image if the image and container don't have the same aspect ratio. To fix this, we can use the [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property on the `<img>` element to determine how the image should be resized to fill its container.
The `object-fit` property can be set with one of five values; the two commonly used values when you want to retain an image's aspect ratio are "contain" and "cover".

```css
.container img {
  object-fit: contain;
/* or
  object-fit: cover; */
} 
```

If you set the value to "contain", the image will fill the width and height of the container and maintain its aspect ratio. If the image and container have different aspect ratios, some background of the container `<div>` will be visible. If you set the value to "cover",  the image will maintain its aspect ratio and cover the container completely, cropping the image as needed.

## Further Reading

If you're looking to get a deeper understanding of how web performance optimization works, take a look at the following articles:

- [From LCP to CLS: Improve your Core Web Vitals with Image Loading Best Practices](https://blog.sentry.io/from-lcp-to-cls-improve-your-core-web-vitals-with-image-loading-best/)
- [How to identify and fix Render-Blocking Resources](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/)
- [How to hack your Google Lighthouse scores in 2024](https://blog.sentry.io/how-to-hack-your-google-lighthouse-scores-in-2024/)
- [5 easy tips to improve your personal website performance](https://blog.sentry.io/5-easy-tips-to-improve-your-personal-website-performance/)

---

*Source: [sentry.io/answers/how-do-i-auto-resize-an-image-to-fit-a-div-container/](https://sentry.io/answers/how-do-i-auto-resize-an-image-to-fit-a-div-container/)*