Изображение с максимальной шириной или высотой самого изображения с сохраненным соотношением сторон, ограниченным размером окна

Мне нужно изображение, которое сохранит соотношение сторон, будет максимальной шириной или высотой самого изображения, но не более высоты/ширины окна.

Вот пример codepen: https://codepen.io/anon/pen/GeQqOv

Этот пример - пользовательские аватары, и пользователь может загружать их любого размера, но я хочу, чтобы большие аватары имели 100% размер изображения и не растягивались на большие экраны для маленького.

Проблема теперь в том, что маленькое изображение будет растягиваться.

img {
  width: 100%;
  height:auto;
  object-fit: contain;
   max-height: 100vh;
}

html css
person ZiiMakc    schedule 14.03.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вам не нужно поддерживать старые браузеры, используйте object-fit со значением contain, которое увеличивает или уменьшает размер изображения, чтобы заполнить поле, сохраняя его соотношение сторон.

img {
  width: 100%;
  height:auto;
  object-fit: contain;
  max-height: 100vh;
}

можно-использовать

person Andy G    schedule 14.03.2019
comment
Спасибо, но маленькое изображение все еще растягивается - person ZiiMakc; 14.03.2019
comment
Лично я хотел бы ввести другие правила стиля для небольших изображений. Я бы не ожидал, что маленькое квадратное изображение будет вести себя так же, как большое пейзажное изображение. - person Andy G; 14.03.2019
comment
проблема в том, что это пользовательский аватар и пользователь может загрузить его любого размера, но я хочу, чтобы большие аватары имели размер 100% и не растягивались на больших экранах в маленький :( - person ZiiMakc; 14.03.2019
comment
Аватар любого размера!!?? Странный. Я бы не хотел этого допустить. Ах хорошо. Я полагаю, вы могли бы написать код для определения размера и применения различных стилей. - person Andy G; 14.03.2019

arrow_upward
0
arrow_downward

Это решение, которое не имеет max-height: 100vh.

img {
  height:auto;
  width:auto;
  object-fit: contain;
  max-width:100%;
  max-height:100%;
  object-fit: contain; 
}
person ZiiMakc    schedule 15.03.2019