2

所以给出以下流体图像：

<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/

4

2 回答 2

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；）。或类似的东西:)

于 2013-04-12T12:38:34.533 回答
0

为什么这很难做到

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

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

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

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

尝试媒体查询

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

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

于 2013-04-12T13:23:53.623 回答