Подогнать изображение под размер блока

Question

Имеется что-то типа:

<div class="img-container">
    <img src="" class="">
</div>

Как сделать, что img-container всегда был 1x1 и при этом картинка в контейнере всегда была ровно по центру (горизонтально и вертикально)?

Пример:

Answer 1

Для того, чтобы сохранять пропорции 1:1 понадобиться родительский container. А позиционировние картинки осуществляется абсолютно с auto-отступами и заданием максимальных размеров:

.container { 
  margin: 10px;
  width: 25%;
  float: left;
}

.img-container {
  position: relative;
  padding-top: calc(100% - 2 * 4px); /* отнимаем удвоеный размер рамки */
  box-sizing: border-box;
  border: 4px solid red; 
}

.img-container img {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
}

<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/300/200">
  </div>
</div>  

<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/300/300">
  </div>
</div>

БЛОГ НА HUSL

Подогнать изображение под размер блока

Ответы (1 шт):