如何在流体宽度容器中居中裁剪图像（<img>）

Posted 2023-03-06

【中文标题】如何在流体宽度容器中居中裁剪图像（<img>）

【英文标题】：How to center crop an image (<img>) in fluid width container

【发布时间】：2013-08-17 07:52:03

【问题描述】：

当图像的流体宽度（基于百分比）容器太小而无法显示整个图像时，如何使图像保持居中？

如何将图像置于其容器内的中心

这意味着当容器太小时它应该显示图像的中间而不是侧面。

【参考方案1】：

什么时候起作用

您可能有一个容器，其中包含一些内容，例如两个各自宽 50% 的 <div>s，彼此相邻。对于这个例子，我们可以只说明容器的一个子容器：

我们将命名外部矩形.container、内部矩形.content 和图像img。这种安排非常好，只要.content 总是比img 宽。

当它破裂时

由于我们正在处理百分比并且可能使用响应式设计，因此可能并非总是如此。如果.content 比img 更薄，就会发生裁剪：

问题

如果img 最有趣的部分在中心，我们需要让浏览器均匀地裁剪两个边缘 - 无论.content 的宽度是多少，都可以看到最好的部分。

解决方案

幸运的是，解决方案是可能的。更好的是，不需要额外的标记。

.content 
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */


img 
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */

【讨论】：

嗨 Bryce，优秀的教程，它对我有用，但我想停下来问一下，这是如何工作的？我真的不明白怎么做。也许有人可以启发我。

@BryceHanscomb 在开发工具“IE9”中我没有看到这个问题......但是在来自modern.ie Win7/IE9 的库存VM 中我看到了这个问题。我假设真正的 IE9 会比模拟器更受信任？

注意：在table-cell 中，您需要将img 居中，而不是.content。

这很奇怪，它只适用于特定大小。 See this fiddle 并上下调整窗格大小。

你是明星，从好几天开始寻找这个答案...***.com/questions/46159476/…

【参考方案2】：

新浏览器可以翻译一下

figure
    width: 100%;
    text-align: center;
    overflow: hidden;

img
    position: relative;
    left: 50%;
    transform: translate(-50%,0)

要支持 IE8，您仍然可以使用@BryceHanscomb 提供的上述技术。

.no-csstransforms figure img 
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */

【讨论】：

为了支持旧版本的 Safari，还要添加供应商前缀转换：-webkit-transform: translate(-50%,0);看到这个帖子：***.com/questions/29864790/…

这应该是公认的答案，因为它支持大尺寸图片。

【参考方案3】：

如果你预计要显示的图像会比显示容器长很多，设置 left: 100%;和左边距：-200%； （来自布莱斯的回答）可能不足以获得图像的中心部分。只需为两者设置更大的百分比即可。确保另一个是另一个的一半。

left: 500%;
margin-left: -1000%;

【参考方案4】：

我遇到了同样的问题，但这里的解决方案对我没有帮助（因为我在表格内显示，并且因为我希望更改图像而不必每次都手动缩放它，因为图像是由客户发送的）

这是我发现的，更有效，更容易：

img 
 object-fit: cover;
 width: 150px;
 height: 150px;