所以给出以下 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/
最佳答案
它有点乱,但它可以工作(仅在 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;)。或者像这样的东西:)
关于html - 宽度大于其包装器的子图像是否可以(设置为溢出 :hidden) be dynamically horizontally centered?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15971293/