裁剪图像而不是拉伸它

Question

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

Answer 1

显示它作为背景图像

Answer 2

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

然后在上面DIV你可以用CSS玩

• 宽/高
• 背景位置

创建不同的作物效应。

Answer 3

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

背景位置：5px的5px的;

然后设置div的高度和宽度

height：55px;

width：55px;

Answer 4

您可以使用CSS属性clip：

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

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

请参见：

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

Answer 5

现代的方法是使用object-fit: none;（或更常见的object-fit: cover;如果你想扩展，但不拉伸）。浏览器的

img { 
    object-fit: cover; 
} 

74％支持这个2016十一月的 - Can I use?