Использование объектной подгонки для адаптивного изображения

Question

У меня есть макет сетки с 3 столбцами, каждый примерно по 33% ширины страницы - я бы хотел иметь квадратное изображение вверху каждого столбца, но не могу контролировать фактическое соотношение сторон изображения. *

Сейчас я использую object-fit:cover;, чтобы обрезать изображение до определенного c размера (400 пикселей x 400 пикселей), но теперь это изображение не масштабируется с шириной столбца.

Как сделать убедитесь, что обрезанное изображение помещается внутри столбца, сохраняя при этом его новое соотношение сторон?

div {
  width: 33.33%;
  border: 1px solid blue;
}

div > img {
  width: 40rem;
  height: 40rem;
  object-fit: cover;
}

<div>

  <img src="https://via.placeholder.com/480x800">

</div>

Answer 1

Для этого вам может понадобиться дополнительный div:

.col {
  width: 33.33%;
  float: left;
  border: 1px solid;
  box-sizing: border-box;
}

.col > div {
  position: relative
}

.col > div::before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

.col img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="col">
  <div><img src="https://via.placeholder.com/480x800"></div>
  <p>some text here</p>
</div>
<div class="col">
  <div><img src="https://via.placeholder.com/480x1200"></div>
  <p>some text here</p>
</div>
<div class="col">
  <div><img src="https://via.placeholder.com/600x400"></div>
  <p>some text here</p>
</div>