Avoid stretching css image

Question

I present the image in my div. I want to avoid stretching my image.

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

My problem is that my image is fixed in width. I want to be normal width, although some images will be skipped.

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

I solved it.

Answer 1

I would forget to set the minimum height and maximum height. Just set the height to 300 pixels and put the overflow hidden in the div tag. Thus, no matter what size the image, it will always remain in proportion and never go beyond your div tag.

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

Answer 2

Place the image as the background of the div if you want to avoid stretching in the easiest way (but keep the original width).

Answer 3

You can use overflow:hidden to hide any part of the image beyond the width of the div.

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

Answer 4

just specify maximum width 100% and height: auto

Answer 5

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

Answer 6

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

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