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;
}

If you want the image to be auto width do not put any styles on it. — Pavlo, Apr 23 '13 at 19:36
You set `min-width`, which says that the minimum width is `300px`. Did you mean `max-width`? — Cezary Wojcik, Apr 23 '13 at 19:35
My image needs to be min 300px in width. To fill out the div. — Zincktest, Apr 23 '13 at 19:37
Does not work. Then it fill out the widht, but not the height. — Zincktest, Apr 23 '13 at 19:42
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 — Zincktest, Apr 23 '13 at 19:44
@user2231285 my and Ekaterina's answers will both give you that — snumpy, Apr 23 '13 at 19:45
@user2231285 Please upload a screenshot. It appears that we are all confused about what you actually want. — snumpy, Apr 23 '13 at 19:51
@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 — snumpy, Apr 24 '13 at 11:07
Possible duplicate of [CSS Image size, how to fill, not stretch?](https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch) — SchadeM, Jun 19 '18 at 15:06

score 46 · Answer 1 · answered Oct 14 '19 at 15:55

46

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

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

answered Oct 14 '19 at 15:55

Al Amin

739
6
12

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. – Pwpwpw Dec 15 '19 at 18:39
1

Note: IE11 doesn't support `object-fit`. – Neurotransmitter Jun 11 '20 at 16:16
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. – Gass Mar 28 '22 at 06:52

ZombieCode · Answer 2 · 2013-04-24T01:54:22.977

13

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; }

edited Apr 24 '13 at 01:54

answered Apr 23 '13 at 19:39

ZombieCode

1,597
2
22
43

score 4 · Answer 3 · answered Apr 23 '13 at 19:36

4

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

answered Apr 23 '13 at 19:36

Shomz

36,910
3
55
83

score 3 · Answer 4 · answered Jun 19 '20 at 05:34

3

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

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

Height is automatically adjusted

answered Jun 19 '20 at 05:34

Vincent

4,248
1
37
37

Jyothish Kumar · Answer 5 · 2019-03-23T07:03:58.220

2

just specify max-width 100% and height :auto

edited Mar 23 '19 at 07:03

answered Nov 20 '18 at 06:35

Jyothish Kumar

29
4

score 1 · Answer 6 · answered Apr 23 '13 at 19:36

1

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

answered Apr 23 '13 at 19:36

justisb

6,652
2
26
43

snumpy · Answer 7 · 2013-04-23T19:48:44.027

1

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;   
    }

edited Apr 23 '13 at 19:48

answered Apr 23 '13 at 19:38

snumpy

2,748
5
23
38

score 0 · Answer 8 · answered Jul 26 '21 at 00:42

==>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
}

score 0 · Answer 9 · answered Feb 27 '22 at 10:46

0

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

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

answered Feb 27 '22 at 10:46

Mundruku

89
1
5

score 0 · Answer 10 · answered Mar 28 '22 at 06:59

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

Avoid stretch on image css

10 Answers10

More about object-fit

Object-fit Values

Linked