gpt4 book ai didi

html - Firefox 不水平扩展包含自动宽度图像的 DIV 容器

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:09 25 4
gpt4 key购买 nike

我有一个包含两个容器的标记。第一个设置为“position:absolute”,所有 4 个“坐标”在整个网站上展开(left=right=bottom=top=30px)。

在该容器内是另一个容器,其高度设置为“100%”和“display:inline-block”(“inline-block”是因为第二个容器应仅水平扩展到所需的宽度)。

在第二个容器中是一个图像,其高度设置为“100%”,宽度设置为“自动”,因此图像始终与两个容器一样高,并且仍然具有正确的比例。

我需要这个第二个容器,因为我想在这个容器中放置一些绝对定位的元素,以便始终出现在图像的右侧。

问题如下:在 Firefox 中,第二个容器不会随着图像的自动宽度水平增长/扩展。它保持在图像的原始宽度。在 Safari/Chrome 中没有问题,只有 Firefox。

在这里您可以找到一个示例 fiddle :http://jsfiddle.net/EGRCQ/第一个容器是蓝色容器。在这个里面你会发现第二个容器(红色)和这个容器中的一个示例图像。如果将输出窗口的高度降低到 180px 以下,就会出现问题(红色容器变得可见),或者您只需使用 Firebug 检查其宽度。

HTML

<body>
<div id="container1">
<div id="container2">
<img src="http://cdn4.spiegel.de/images/image-491267-thumb-wjvo.jpg"
width="180" height="180" />
</div>
</div>
</body>

CSS

html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container1 {
background: aqua;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
}
#container2 {
background: red;
height: 100%;
display: inline-block;
}

#container2 img {
height: 100%;
width: auto;
}

谢谢,

丹尼尔

最佳答案

收缩包裹流体图像

此问题的一个版本也出现在 IE10、Chrome 和 Safari 中。如果图像是部分透明的,则更明显,如 modified demo . container2 在页面首次加载时按预期调整大小,但如果调整浏览器大小,它会保持其初始宽度。

Opera 的行为与 Firefox 相同。

似乎 container2 的收缩包装(它的宽度只是适应其内容所需的宽度)在某种程度上取决于子内容的已知宽度。对于 Firefox 和 Opera,当为子图像指定 width:auto 时,它会使用图像的自然宽度,而不考虑实际缩放后的宽度。其他浏览器在收缩容器 container2 时能够计算显示宽度,但它们仅在页面首次加载时才这样做;之后,继续使用最初计算的值。

简而言之,Firefox 和 Opera 从不执行宽度计算。而其他浏览器仅在页面首次加载时执行它,而不是在浏览器重新调整大小时执行。

解决方法

似乎没有明显的方法可以强制浏览器对子图像执行宽度计算;但是,如果需要 container2 的唯一原因是将其他内容绝对定位在图像的右侧,那么还有另一种方法可以实现此目的:

不是将容器收缩包裹在图像周围,而是在它旁边放置一个元素(inline-block 或 float ),并使用该元素放置绝对定位的内容。

在两个演示中,container2 都是图像的兄弟。一个带有文本内容和黑色背景的小元素绝对定位在 container2 中,以演示将内容放置在图像的右侧。为了使事情更明显,container2 被赋予 10px 的宽度和相同的红色背景,但它在宽度为 0 时工作正常。

关于html - Firefox 不水平扩展包含自动宽度图像的 DIV 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16345105/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com