'Avoid stretch on image css

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


Solution 1:[1]

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

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

Solution 2:[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; }

Solution 3:[3]

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

Solution 4:[4]

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

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

Height is automatically adjusted

Solution 5:[5]

just specify max-width 100% and height :auto

Solution 6:[6]

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

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

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

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

Solution 10:[10]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Al Amin
Solution 2
Solution 3 Shomz
Solution 4 Vincent
Solution 5
Solution 6 justisb
Solution 7
Solution 8 Melkong
Solution 9 Mundruku
Solution 10 Gass

Related Questions