在 div 中裁剪和居中任意大小的图像

Posted 2023-02-25

【中文标题】在 div 中裁剪和居中任意大小的图像

【英文标题】：Crop and center arbitrarily-sized image within a div

【发布时间】：2014-02-27 00:03:46

【问题描述】：

我有一个div，我想在其中放置任何任意大小的图像，最好使用img 标签而不是CSS background-image 样式。我查看了许多其他类似的问题，但没有人回答我的问题。

我希望图像的显示方式是这样的：

如果图像是纵向的（高度大于宽度），则图像将在div 内具有 100% 的宽度并垂直居中。额外的高度将在 div 之外，但不可见（如，图像将显示为“裁剪”。）

如果是横向，则 #1 中的属性将适用，但水平方向而不是垂直方向。

我确实不想要拉伸图像。我确实想填满 div 中的整个空间。

这方面的一个例子是出现在imgur.com 上的图像框。

【问题讨论】：

我无法弄清楚如何在不拉伸图像以适应 div 或以 100% 大小显示的情况下显示图像，这会导致仅显示图像的左上角。

【参考方案1】：

尝试使用 javascript 将其居中。只需设置position: absolute、left:50%、top:50% 和margin-left:-width/2、margin-top:-height/2

【讨论】：

position: absolute?你的意思是position: relative？

@CSSStudent 尝试一个或另一个看看。相对占空间，绝对不占空间。