html - 宽度大于其包装器的子图像是否可以(设置为溢出 :hidden) be dynamically horizontally centered?

Question

所以给出以下 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/

Answer 1

它有点乱，但它可以工作(仅在 Firefox 中测试)。 fork 示例(尝试调整框架大小):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；)。或者像这样的东西:)