裁剪图像而不是拉伸它答案

【问题标题】：Crop an image instead of stretching it裁剪图像而不是拉伸它
【发布时间】：2011-02-07 02:13:03
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以使用 CSS clip 属性：

#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

使用clip 的缺点是元素必须绝对定位，并且仅适用于“rect”形状。

见：

【讨论】：

【解决方案2】：

现代的方式是使用object-fit: none;（或者更常见的object-fit: cover;，如果你想缩放，但不拉伸）。

img {
    object-fit: cover;
}

截至 2018 年 3 月，93% 的浏览器会话支持此功能。 — Can I use?

【讨论】：

【解决方案3】：

背景位置：5px 5px;

然后设置div的高度和宽度

高度：55px；

宽度：55px；

【讨论】：

【解决方案4】：

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

那么在上面的DIV中就可以玩CSS了

创建不同的裁剪效果。

【讨论】：

【解决方案5】：

显示为背景图片

【讨论】：