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

Question

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

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

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

Answer 1

何时起作用

您可能有一个容器，其中包含一些内容，例如每个50％宽的两个<div>，彼此相邻。在这个例子中，我们只能说明容器的一个子节点：

我们将外部矩形.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! */
}

Answer 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! */
}

Answer 3

如果您预计要显示的图像比显示容器长得多，则设置为左：100％;和margin-left：-200％; （来自布莱斯的答案）可能不足以获得图像的中心部分。只需为两者增加一个更大的百分比。确保另一个是另一半的另一半。

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

Answer 4

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

这是我发现的内容，更加高效，容易得多：

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