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