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，或沿vertical-align和text-align使用负边距：

.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属性，就像您拉伸页面一样。如果你只设置一个，另一个与它一起缩放。根据您的图片类型和方式，您需要设置高度和宽度。

图像按比例填充div而不使用背景大小：封面或物体贴合：封面

2 个答案: