宽度大于其包装（设置为溢出：隐藏）的子图像可以动态水平居中吗？

Posted 2023-03-05

【中文标题】宽度大于其包装（设置为溢出：隐藏）的子图像可以动态水平居中吗？

【英文标题】：Can a child image with a width greater than its wrapper (set to overflow:hidden) be dynamically horizontally centered?

【发布时间】：2013-04-04 23:26:42

【问题描述】：

所以给出以下fluid image：

<div class="container">
    <img src="http://www.placehold.it/400x150">
</div>

与

.container 
    margin: 0 15px;
    overflow: hidden;
    text-align: center;


img 
    min-width: 300px;
    max-width: 100%;

是否可以在 css 中将此图像水平居中，而边缘溢出，而不将其设置为背景图像？

源代码也在这里：http://jsfiddle.net/RWqha/3/

【参考方案1】：

它有点乱，但它可以工作（仅在 Firefox 中测试）。分叉示例（尝试调整框架大小）：http://jsfiddle.net/GAFzc/

<div class="container">
    <div class="image-wrap">
       <img src="http://www.placehold.it/400x150">
    </div>
</div>

.image-wrap 
     margin: 0 -999px;
     text-align: center;     

您正在寻找此解决方案吗？

UPD

所以，如果我们需要一个响应式图像，它会适应容器宽度，但仍然有一个最小宽度值，并且必须在可见部分中居中，我们应该使用另一种方法来丰富那个。我想，我找到了解决方案： http://jsfiddle.net/GAFzc/5/

html（同）：

<div class="container">
    <div class="image-wrap">
       <img src="http://www.placehold.it/500x200">
    </div>
</div>

CSS：

.image-wrap 
     margin: 0;
     text-align: center;
     text-indent: -300px; /* Min width of image */

.image-wrap > img 
     position: relative;
     left: 150px; /* Half of min-width value */
     min-width: 300px;
     width: 100%;
     display: inline-block; /* or inline */

我实际上并不了解它是如何工作的，但它确实有效（在 Chrome、FF、IE10,9 中测试过）。 这里的主要技巧是使用文本缩进。我们“保留”了第一行左边缘之外的空间，然后用它来使我们的图像居中（左：150px；）。或者类似的东西:)

【讨论】：

看起来不错，但你知道如何让它缩小到 300px 的宽度吗？因为它不再那样做了。是因为边距吗？

较大的负边距有效地将.image-wrap 的宽度设置为1998px+width-of-contained-image。这解决了定心问题，但不能解决尺寸问题。然而，好的技术，值得牢记。

@MarcAudet，嗯，没错，这就是它的工作原理。所以我猜它与 max-width:100% 部分不兼容，因为它永远不会达到 100%。但你是对的，但这是一种非常有用的技术。

【参考方案2】：

为什么这很难做到

您正在模仿由 CSS 实现的块格式化算法来呈现视觉内容。

您的容器形成一个块元素，并且图像（具有计算尺寸的内联替换元素）位于父容器的左边缘和上边缘。

这不能使用任何 CSS 属性进行更改，除非您可以硬编码特定值的填充、边距、位置或任何取决于所显示图像尺寸的值。

当然，这可以通过 jQuery/javascript 来完成。在某种程度上，这就是为什么所有这些优雅的图像旋转器和图像画廊都是用 JavaScript/jQuery 构建的。

尝试媒体查询

如果您允许自己充分利用 HTML5/CSS3，您可以尝试指定 CSS 规则以优化小屏幕的媒体查询。

我认为当前的 CSS/HTML 无法实现该效果。