居中并在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