html - 图像按比例填充div，而无需使用背景尺寸:cover或object-fit:cover

我试图用一个图像填充一个div，同时保持它的长宽比。但我不想使用背景大小为：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>

最佳答案

可以使用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>

关于html - 图像按比例填充div，而无需使用背景尺寸:cover或object-fit:cover，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43457745/