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

Posted 2023-03-05

【中文标题】居中并裁剪 div 内的图像 [重复]

【英文标题】：Centre and crop an image inside a div [duplicate]

【发布时间】：2016-11-27 18:39:54

【问题描述】：

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

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

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

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

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

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

我该怎么做？

【问题讨论】：

在欺骗链接中查看这个答案：***.com/questions/493296/…

【参考方案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

【讨论】：

哇！这怎么可能？它完美地工作！并且是我检查过的几十个解决方案中唯一适合我的解决方案！