Avoid stretch on image css

Question

I am rendering an image into a div. I want to avoid stretching of my image.

div {
  height: 300px;
  width: 300px; 
}
img {
  min-width: 300px;
  min-height: 300px;
  max-height: 300px;   
}

My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.

div {
  height: 300px;
  width: 300px; 
  overflow: hidden;
}
img {
  height: 300px
  max-width: none;
  min-width: 300px;
}

Blythebm

You set min-width, which says that the minimum width is 300px. Did you mean max-width? – Leifeste

If you want the image to be auto width do not put any styles on it. – Daft

My image needs to be min 300px in width. To fill out the div. – Blythebm

What are the dimensions of the image? – Spurrier

Does not work. Then it fill out the widht, but not the height. – Blythebm

The dimensions are variable. they changes. the height needs to be 300px and the widht 300px on the div. The part on the image that is wider, needs to be invincible – Blythebm

@user2231285 my and Ekaterina's answers will both give you that – Spurrier

No. it only fits to the left and right side. – Blythebm

@user2231285 Please upload a screenshot. It appears that we are all confused about what you actually want. – Spurrier

@user2231285 Please either post your solution in an answer or mark one of the answers as accepted in order to help people in the future who might have the same problem – Spurrier

Possible duplicate of CSS Image size, how to fill, not stretch? – Adaptation

Answer 1

You can achieve this with simply adding object-fit: cover;. An example might be like -

img {
    height: 300px
    width: 100%;
    object-fit: cover;
}

Should

This is a good solution if you want to keep your min/max width and height, which can be useful for things like setting a hero image to 100vh. I've also found this helpful for situations where Safari would squish my images when no other browser did. – Groovy

Note: IE11 doesn't support object-fit. – Zobias

IE is dead .... After many years as the gold standard of internet browsers, Microsoft is phasing out Internet Explorer, officially ending support on August 17, 2021. – Evora

Just an add-on note to @Gass's comment, IE has now been laid to rest since 15th June 2022 – Eustache

@Eustache RIP IE – Evora

Answer 2

I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.

div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }

Markswoman

Answer 3

Put the image as the div background if you want to avoid stretching the easiest way (yet maintain the original width).

Benner

Answer 4

To make it more flexible as just using 300px use:

img { width: 100%; object-fit: cover; }

Height is automatically adjusted

Preach

Answer 5

To avoid the image from resizing use:

object-fit: none;

More about object-fit

The CSS object-fit property is used to specify how an or should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

Object-fit Values

• fill: this is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
• contain: the image keeps its aspect ratio, but is resized to fit within the given dimension
• cover: the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
• none: the image is not resized scale-down - the image is scaled down to the smallest version of none or contain.

More info and examples

Evora

Answer 6

Use max-width instead of min-width, and just set height to 300px (or only use max-height).

Viscus

Answer 7

just specify max-width 100% and height :auto

Peggie

Answer 8

You can use overflow:hidden to hide any portion of the image outside of the width of the div.

div {
       height: 300px;
       width: 300px; 
       overflow: hidden;
    }
img {
       /*min-width: 300px;*/
       height: 300px;   
    }

Spurrier

Answer 9

==>If you are gonna have fixed height and don't want width stretched

div {
  height: 300px;
  width: 300px; 
  overflow: hidden;
}
img {
  height: 300px
}

==>If you are gonna have fixed width and don't want height stretched

div {
   height: 300px;
   width: 300px; 
   overflow: hidden;
}
img {
 width: 300px
}

Wynny

Answer 10

After giving the image a fixed height and width, I added object-fit as below:

img {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

Ronironica

Answer 11

I'm adding this to expand on the answers given since some of the answers given like adding width:100% height:auto" etc., will still technically stretch Images and/or make them blurry at times. Let me explain.

I work on a lot of eCommerce websites adding products etc and image stretching/blurring is always a problem. Most times, an image scaling down isn't that much of a issue, so the answers given as far as width:100%; height: auto; etc., work just fine. But there are problems when scaling up if the image's container width is larger than the image's native/normal width.

So for example, if you have an image whose width is 100px, and a div container whose width is 200px, if you add a width:100% and height: auto; to your image randomly, this won't technically "stretch" an image, but it will make it look blurry because you are stretching your image past its normal width.

To fix this, one thing i normally do is something like this, assuming on the desktop, that you have an image that you want to show at its 100% native width with no scaling/stretching/blurring whatsoever, I do something like:

img{
  display:block;
  margin:0px auto;
  width: initial;
  height: auto;
}

which keeps my images at their native width with no scaling whatsoever. But then, when an image is going to be seen on a smaller device, I add the same rule block into a media query and do something like:

@media all and (max-width: 1200px){
  img{
    width:100%;
    height:auto;
  }
}

What this is effectively saying is "Hey Image, make my image responsive from point A to point B(mobile devices), but once you go from point B to point C (small laptops to desktops where the image fits normally and doesn't need to stretch), make the width equal to its default native width".

Hope this helps. Happy coding everyone.

Lillia