裁剪图像而不是拉伸图像

Question

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

Answer 1

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

img {
    object-fit: cover;
}

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

Answer 2

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

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

• 宽度/高度
• 背景位置

创建不同的裁剪效果。

Answer 3

您可以使用CSS clip属性：

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

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

请参阅：

• http://www.w3schools.com/CSS/pr_pos_clip.asp
• http://www.cssplay.co.uk/menu/clip_gallery

Answer 4

使用此： http://www.w3schools.com/css/pr_background-position.asp

background-position：5px 5px;

然后设置div的高度和宽度

身高：55px;

宽度：55px;

Answer 5

将其显示为背景图片