How to stretch an image to fill a div while keeping the image’s aspect ratio with CSS?

Spread the love

Sometimes, we want to stretch an image to fill a div while keeping the image’s aspect ratio with CSS.

In this article, we’ll look at how to stretch an image to fill a div while keeping the image’s aspect ratio with CSS.

How to stretch an image to fill a div while keeping the image’s aspect ratio with CSS?

To stretch an image to fill a div while keeping the image’s aspect ratio with CSS, we set the image as the div’s background.

For instance, we write

<div class="fill"></div>

to add a div.

Then we write

.fill {
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: url("path/to/image.jpg");
}

to set image.jpg as the background of the div.

We add background-size: cover; to make the background image fill the div.

And we add background-position: center; to center the background image in the div.

Conclusion

To stretch an image to fill a div while keeping the image’s aspect ratio with CSS, we set the image as the div’s background.

Leave a Reply

Your email address will not be published. Required fields are marked *