居中并在div内裁剪图像

Question

我似乎无法找到答案，尽管有些人很接近。

我有一张图像，我想拍摄中间（裁剪），有点像这样：

因此它完全处于中间且具有相同的宽高比。

我所做的一切都是裁剪图像：

..它连接到边缘。

所以基本上，我想要一个固定大小的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