image - 裁剪图像而不是拉伸(stretch)图像

Question

当我在具有固定宽度和高度的容器中插入图像时，图像会拉伸(stretch)以适合该空间。有没有办法以正常大小显示图像，但剪掉多余的部分？

Answer 1

现代的方法是使用 object-fit: none;(或者更常见的 object-fit: cover; 如果你想缩放但不拉伸(stretch)) .

img {
    object-fit: cover;
}

截至 2022 年 5 月，97% 的浏览器 session 支持此功能。 — Can I use?

---

如果你想将图像锚定在左上角而不是中心，添加:

img {
    object-position: 0 0;
}