Адаптировать изображение под вьюпорт. Сохранение пропорций

#html #css #адаптивность

Нужно, чтобы элемент img, сохраняя пропорции и находясь по центру, принимал минимально
необходимый размер для заполнения родительского блока.


При попытке установить min-height и min-width по 100% изображение растягивается на
всю свою величину, выходя за границы родителя сверх необходимого (да ещё и только от
левого верхнего угла).
Возможно ли это без скриптов?
    

Ответы

Ответ 1

Можно воспользоваться object-fit: cover; и object-position: center; например:



div.a {width: 400px; height: 200px;}
div.b {width: 200px; height: 400px;}
div {border: 1px solid black;}
div img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
}

  


  



Ответ 2

Можно сделать через background-size: cover; как сам фон. То есть в отличае от ответа
fanfer картинка задаётся не элементом img а самим фоном.



.el {
  background: url(https://i.stack.imgur.com/N1DGN.png);
  background-size: cover;
  border: 1px solid black;
  background-position: center;
}

.e1 {
  width: 400px;
  height: 220px;
}

.e2 {
  width: 220px;
  height: 400px;
}




Ответ 3

.img_wrap {
  border: 1px solid #000;
  margin-bottom: 10px;
}

.d1{
  width: 300px;
  height: 100px;
}

.d2{
  width: 200px;
  height: 300px;
}

.img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}