不使用 background-size:cover 或 object-fit:cover 按比例填充 div 的图像

Question

我正在尝试用图像填充 div，同时保持其纵横比。但是我不想使用带有 background-size:cover 的背景图片，甚至不想使用 object-fit:cover 属性，我想要使用 img 标签的结果。

正如您在下面的代码中看到的，不使用 object-fit:cover 或 background-size:cover 图像被拉伸，这不是我想要的结果。

.post-thumbnail {
  width: 352px;
  height: 240px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
}

<div class="post-thumbnail">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>

在下面的代码中，由于 object-fit:cover 的原因，图像没有被拉伸，我想要在不使用此属性的情况下获得相同的结果，因为它没有很好的兼容性。有谁知道我该怎么做？

.post-thumbnail {
  width: 352px;
  height: 240px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="post-thumbnail">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>

Answer 1

您可以使用 clip() + position:absolute，或者使用垂直对齐和文本对齐的负边距：

.post-thumbnail {
  display:inline-block;
  width: 352px;
  height: 240px;
                           line-height:240px;
                           text-align:center;
  overflow: hidden;
}
.post-thumbnail.small {
  width: 40px;
  height: 60px;
  line-height: 60px;
}

.post-thumbnail img {
                             min-width: 100%;
                             min-height: 100%;
                             vertical-align:middle;
                             margin:-500px;
}

/* demo purpose to show what is being hidden;*/
.post-thumbnail {
  margin:50px;
  overflow: visible;
  box-shadow:0 0 0 50px rgba(200,200,200,0.5);
  border:solid blue;
}

.post-thumbnail img {
  position:relative;
  z-index:-1;
}

<div class="post-thumbnail">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>
<div class="post-thumbnail small">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M">
</div>

Answer 2

您正在设置 height 属性和 width 属性，这样您就可以拉伸页面。如果您只设置一个，则另一个会随之缩放。根据您拥有的图片类型以及您想要的方式，您需要设置高度和宽度。