居中并裁剪 div 内的图像 [重复]

Question

我似乎找不到这个问题的答案，虽然有些答案很接近。

我有一张图片要从中取出（裁剪），有点像这样：

所以它完美地在中间并且具有相同的纵横比。

我所能做的就是像这样裁剪图像：

..它连接到边缘的地方。

所以基本上，我想要一个固定大小的 div，里面有一个图像。此图像需要放大并居中，并隐藏溢出。

我该怎么做？

Answer 1

HTML：

<div>
  <img src="https://picsum.photos/600/500" />
</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