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

Question

假设您有一个 400 宽 800 高的图像，但是，您希望图像填充 400 宽 x 400 高的容器，但您不想缩小它，而是想切掉(而不是显示)图片底部 400px。我该怎么做？

Answer 1

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;

---

使用不应超过视口(viewport)高度 50% 的 400x800 像素图像的示例。

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检查哪些浏览器理解它。