为响应图像使用 object-fit

Question

我有一个包含 3 列的网格布局，每列大约占页面宽度的 33% - 我希望在每列的顶部有一个方形图像，但无法控制图像的实际纵横比。

我目前正在使用 object-fit:cover; 将图像裁剪为特定大小 (400px x 400px)，但现在该图像不随列宽缩放。

如何在保持新宽高比的同时确保裁剪后的图像适合列？

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>

为响应图像使用 object-fit

Using object-fit for a responsive image

css

responsive-design