裁剪圖像而不是拉伸它

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?