Question

假设您有一个400宽度800高度的图像，但是，您希望该图像填充400宽度x 400高度的容器，但您不想将其按比例缩小，而是想要切分（不显示）图片的底部400像素。我该怎么办？

Answer 1

完成此操作的一种快速方法是将图像放在400x400的div内，然后隐藏溢出内容。

.image-holder {
  height: 400px;
  width: 400px;
  overflow: hidden;
}

<div class="image-holder">

  <img src="https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?cs=srgb&dl=landscape-nature-sky-236047.jpg&fm=jpg" alt="Image unavailable" />

</div>

Answer 2

Object-fit似乎是您想要的。它可以裁剪或缩小图像。

可以使用的值：

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

您还可以使用objec-position设置其裁剪方式。（如果未指定，通常从各个侧面进行裁剪，显示中心） 可能的值。

object-position: center top;
object-position: 100px 50px;

使用400x800像素图像的示例，该图像不应超过视口高度的50％。

img {
width:400px;
max-height:50vh;
object-fit: cover;
}
img + img {
object-position: top left;
}

<img src="http://dummyimage.com/400x800">
<img src="http://dummyimage.com/400x800">

请参阅https://caniuse.com/#search=object-fit，以查看哪些浏览器可以理解。

如果高度太大，如何限制显示多少图像？

2 个答案: