中心和裁剪一個div內的圖像

Question

我似乎無法找到答案，雖然有些接近。

我有，我要拿出中期（裁剪），有點像這樣的圖像：

所以這是完全在中間，並用相同的縱橫比。

所有我設法做的，是作物的圖像，像這樣：

..where它連接到邊緣。

所以基本上，我想有一個固定大小的div，裏面有圖像。此圖像需要放大並居中，並且隱藏了溢出。

我該怎麼做？

Answer 1

HTML：

<div> 
    <img src="http://www.nature.org/cs/groups/webcontent/@web/@northamerica/documents/media/pygmy-rabbit-600x500.jpg" /> 
</div> 

CSS：

div{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

img{ 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    right: -9999px; 
    bottom: -9999px; 
    margin: auto; 
} 

CODEPEN鏈接： http://codepen.io/bra1N/pen/NArjNN