Избегайте растягивания изображения css

Question

Я делаю изображение в своем div. Я хочу избежать растяжения своего образа.

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

Моя проблема в том, что мое изображение фиксируется по ширине. Я хочу быть нормальной шириной, хотя некоторые изображения будут пропущены.

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

Я решил.

Answer 1

Поместите изображение в качестве фона div, если вы хотите избежать растяжения самым простым способом (при этом сохраняйте исходную ширину).

Answer 2

Использование max-width вместо min-width и просто установить height в 300px (или только использовать max-height).

Answer 3

Вы можете использовать overflow:hidden, чтобы скрыть любую часть изображения за пределами ширины div.

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

Answer 4

Я бы забыл установить минимальную высоту и максимальную высоту. Просто установите высоту 300 пикселей и поместите переполнение, скрытое в теге div. Таким образом, независимо от размера изображения, он всегда будет оставаться в пропорции и никогда не выйдет за пределы вашего тега div.

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