Пропорциональное вписывание изображения

#html #css

Нужно вписать изображение в div фиксированного размера, но так, чтобы больший размер
изображения занимал 100% div'а, а меньший - сколько получится. Если подгонять только
один фиксированный размер, то это выглядит так

  div {
    width: 125px;
    height: 70px; 
  }
  div img {
    width: 100%;
    height: auto;
  }


Но если у изображения высота больше, чем ширина, то получается швах. Решается ли
проблема на CSS?
    

Ответы

Ответ 1

Если я правильно понял вопрос, то вам нужно свойство background-size.
Например:

div {
    background: url(/example/image/mybg.png) 100% 100% no-repeat;
    background-size: contain;
}


cover

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

contain

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

Источник: https://webref.ru/css/background-size



А если именно с тегом img нужно, то может такое решение устроит?



.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  position: absolute;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}






Ответ 2

Можно еще проще, с object-fit: contain. Тогда изображение автоматически центрируется.
Замена на object-fit: cover растянет картинку на весь блок, тоже с автоматическим центрированием.

div img {
  width: 100%;
  height: 100%;
  object-fit:contain;
}




.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.cover img {
  object-fit: cover;
}












Ответ 3

Вариант с ответом Romchik, но без абсолютного позиционирования (расположение за счёт
flexbox):



.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  margin: 10px;
  
  /* сделать inline flex-контейнером */
  display: inline-flex;
  /* центрировать элементы горизонтально */
  justify-content: center;
  /* центрировать элементы вертикально */
  align-items: center;
}

div img {
  max-height: 100%;
  max-width: 100%;
}