不使用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属性，这样您就可以伸展页面。如果仅设置其中一个，则另一个将随之缩放。根据您拥有的图片类型和所需的方式，您需要设置高度和宽度。