宽度大于其包装(设置为溢出:隐藏)的子图像可以动态水平居中吗?
Posted
技术标签:
【中文标题】宽度大于其包装(设置为溢出:隐藏)的子图像可以动态水平居中吗?【英文标题】: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 无法实现该效果。
【讨论】:
以上是关于宽度大于其包装(设置为溢出:隐藏)的子图像可以动态水平居中吗?的主要内容,如果未能解决你的问题,请参考以下文章