对图像进行裁剪而不是拉伸

Question

22

当我将一张图片放入一个固定宽度和高度的容器中时，图片会被拉伸以适应该空间。有没有办法以正常尺寸显示图片，但裁剪掉多余的部分？

- amit

5个回答

10

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

然后在上面的DIV中，您可以使用CSS进行以下操作

以创建不同的裁剪效果。

- Marco Demaio

2

您可以使用CSS的clip属性：

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

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

参见：

- David Thomas

1

使用以下代码： http://www.w3schools.com/css/pr_background-position.asp 然后设置div的高度和宽度：

高度：55像素；宽度：55像素；

- AjayP

-1

将其显示为背景图像

- Ray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zaz · Accepted Answer

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

img {
    object-fit: cover;
}

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

如果你想将图像固定在左上角而不是中心位置，请添加：

img {
    object-position: 0 0;
}