How to scale an image with css to fill a div keeping aspect ratio?

Question

I'd like to fill a div with an img, keeping aspect ratio and stretching either width or height as much as required to fit in.

<div style="width: 80px; height: 80px">
    <img src="..." />
</div>

How could I achieve it? If the image is not quadratic, it must be "zoomed in" and either be scropped top-bottom or left-right, depending which side is the bigger one. Moreover the image should afterwards be centered, so that the corners get cut equally.

I tried (but no effect):

.thumb {
    max-width:100%;
    max-height:100%;
}

If I add additional width: 100%; height:100%;, the images fit perfectly, but are resized not keeping aspect ratio.

Do you want to fill the whole div with your image and resize with it but also keep the aspect ratio? — Evochrome
– Evochrome, Commented Aug 11, 2015 at 13:56
I believe you are searching for something like object-fit An example of how it works: css-tricks.com/almanac/properties/o/object-fit IE is missing support although — evanzto
– evanzto, Commented Aug 11, 2015 at 13:57
If you do not need this image in source, than you better use background-image. — skobaljic
– skobaljic, Commented Aug 11, 2015 at 14:11

membersound · Accepted Answer · 2015-08-11 14:45:31Z

83

the following did the trick:

    width:100%;
    height:100%;
    object-fit: cover;
    overflow: hidden;

edited Aug 11, 2015 at 14:45

answered Aug 11, 2015 at 14:06

membersound

87.9k222 gold badges689 silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cdMinix Over a year ago

Be aware though that this won't work in Internet Explorer.

cdMinix Over a year ago

Also, saying "all the presented solutions did not work", comes a bit strange to me, as the solutions from MoLow, Greg and my own solution seem to be working.

radistao Over a year ago

also object-fit: scale-down;, then overflow: hidden; is redundant

Auxiliary Joel Over a year ago

thank you for this, this did it for me. including the height was the bit I had missing. Once width, height and object-fit:cover were combined then everything worked perfectly (provided the outer div had a set width and height to determine its size and position on the page)

cdMinix · Accepted Answer · 2017-06-07 10:02:45Z

14

Using max-width, the image will be contained inside the div, there will be no overflow.

If you use min-width instead, the shorter side will be exactly 100% of the div while the other side can be longer. To center the image, we can use translate and relative positioning.

The following code works.

div {
  overflow: hidden;
} 
.thumb {
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}

edited Jun 7, 2017 at 10:02

answered Aug 11, 2015 at 13:57

cdMinix

6951 gold badge8 silver badges30 bronze badges

1 Comment

Stop War Over a year ago

By far the best answer of the lot. It works to some extent too, but in a situation where there are two images in (adjacent) cells of a table (or for that matter, two divs), resizing of one of the images fails. Actually I am looking to resize one image to that of another while maintaining the aspect ratio. Not possible? I will keep looking for it.

Greg · Accepted Answer · 2015-08-11 13:55:47Z

9

To keep an image's aspect ratio, just specify one dimension:

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    overflow: hidden;
}

img {
    height: 100%;
}

This will produce the following effect:

However, as you can see, the kitten is not central, but you can use Flex box to sort this out.

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

img {
    flex: 1;
    height: 100%;
}

answered Aug 11, 2015 at 13:55

Greg

22k17 gold badges89 silver badges110 bronze badges

1 Comment

JFFIGK Over a year ago

both approaches do not work: In neither case the width of the parent is respected

MoLow · Accepted Answer · 2015-08-11 13:57:47Z

5

use background-size:cover

div{
  background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg);
  background-size:cover;
  }

<div style="width:80px;height:80px;"></div>

answered Aug 11, 2015 at 13:57

MoLow

3,0642 gold badges23 silver badges41 bronze badges

1 Comment

1Ghasthunter1 Over a year ago

It works visually but know that SEO doesn't pick up on that image

Matt · Accepted Answer · 2015-08-11 13:58:29Z

4

.thumb {
    max-width:100%;
    height:auto;
}

Or ( to allow scale up and down, which will look pixelated if you scale up, where the above will only scale to the max size of the image )

.thumb {
    width:100%;
    height:auto;
}

Is what you are looking for.

More info on responsive images:

edited Aug 11, 2015 at 13:58

answered Aug 11, 2015 at 13:54

Matt

1,1671 gold badge15 silver badges26 bronze badges

1 Comment

membersound Over a year ago

No, because images where width > height won't fill the whole space. Moreover, images are not centered after crop.

PengTheEngineer · Accepted Answer · 2019-05-06 22:45:42Z

4

Not sure if anyone still looking at this post. I came across this while I was looking for a way to fit a image into a < div > without getting the unwanted white space around the image, because I was using hover & stick-out effect. I was inspired by Matt's solution. Instead of

.thumb {
max-width:100%;
height:auto;}

I added

.thumb {
max-width:100%;
max-height:100%;
height:auto;}

Now my images fit in to the < div > perfectly without having those white space stick out with the image.

answered May 6, 2019 at 22:45

PengTheEngineer

412 bronze badges

Collectives™ on Stack Overflow

How to scale an image with css to fill a div keeping aspect ratio?

6 Answers 6

4 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related