裁剪图像而不是拉伸图像

Question

当我在具有固定宽度和高度的容器中插入图像时,图像会拉伸以适合该空间.有没有办法以正常尺寸显示图像,但有多余的剪裁？

Answer 1

现代的方式是使用object-fit: none;(或者更常见的是,object-fit: cover;如果你想扩展,但没有拉伸).

img {
    object-fit: cover;
}

截至2018年3月,93%的浏览器会话都支持此功能.- 我可以用吗？

Answer 2

<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>

然后在上面的DIV中你可以玩CSS

• 宽度/高度
• 背景位置

创造不同的作物效果.

Answer 3

将其显示为背景图片