@Mr_Joe

Как сохранять пропорции у картинки?

Всем привет! У картинки есть контейнер с фиксированными размерами. Мне нужно, чтобы картинка заполняла всю область контейнера и при этом не потеряла пропорции.
Пример
<figure>
  <img src="https://img5.goodfon.ru/original/2048x1289/6/a7/nature-meadow-river-mountains-trees-forest-houses-grass-mist.jpg" alt="">
</figure>

figure {
  width: 600px;
  height: 500px;
  background: red;
  overflow: hidden;
  img {
    max-width: 100%;
    height: auto;
  }
}

В примере получается красная полоса снизу, если сделать
min-width: 100%;
min-height: 100%;

то картинка слишком велика.
  • Вопрос задан
  • 12095 просмотров
Решения вопроса 1
@Dreamer_48
Чтобы картинка не потеряла пропорции ее можно обрезать с помощью свойства "object-fit: cover
<div>
  <img src="https://cdn-images-1.medium.com/max/1600/1*Kv3K7qzzGgQJoUOJWO-ZqQ.png" alt="">
</div>
"
div 
{
  height: 200px;
  width: 600px;
  border: 1px solid red;
}
img
{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Mesuti
@Mesuti
img {
object-fit: cover;
}


https://jsfiddle.net/8kurn0gf/2/
Ответ написан
Комментировать
@Bladee09
Polly
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы