我有一个设置为max-width:780px 的容器，并且高度未声明。在容器内，有一个图像幻灯片。页面上的所有内容都是响应式的，因此当宽度减小时，图像（宽度设置为 100%）会调整高度容器。
幻灯片将图像更改为 display:static; 和 position:absolute;，它们不再“保持打开”容器，因为它不被视为容器的内容
是否有任何创造性的解决方案来获取绝对定位的子元素的高度？
下面的示例在主容器上没有声明任何高度.. 没有任何东西让它保持打开状态。 http://dhut.ch/test/santos/
谢谢！
【问题讨论】：
标签： css image fluid responsive-design
删除绝对位置。我也会避免使用内联样式。
【讨论】：
我认为你最好改变你的方法。对于滑块，最好的做法是浮动容器的子元素，并使用一种已知的技术来防止父元素的大崩溃。所以，我建议你从图像中删除position: absolute CSS 规则并将它们浮动到你的<div id='main'> 中，然后使用这些方法中的任何一种来强制它包含它的孩子：
div#main {overflow: hidden;}div#main:after {content: ''; display: block; clear: both; visibility: hidden;}<div style='clear: both;'> 添加到主 div 容器的末尾。【讨论】：
图片的尺寸都是一样的吗？如果是，您可以在包含图像的元素上使用百分比padding-top。
因此，如果您的图片都是 760 像素宽 x 500 像素高，那就是 500/760 = .65789
百分比将转化为：
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
之所以有效，是因为padding 如果设置了百分比，则计算为宽度的百分比。随着元素的宽度缩小，高度将按比例缩小，并且盒子将保持相同的宽高比。绝对定位的图像不会增加框的高度。
只要您的图片都具有相同的宽高比并且您不希望该比例发生变化，这将起作用。如果您将使用大量随机图像，那么这不适合您。
【讨论】：
我最近遇到了一个类似的图像问题，我需要将其绝对定位在 Zurb Foundation 模板页面的顶部，以便将其拉出流程并重置其尺寸（图像必须拉伸到包装器的边缘，而是由其父 .row 填充包围）。然而，当然，这意味着它下方的所有流体响应元素都会在图像顶部弹出。设置 margin-top 或将同级元素定位在下方意味着不会随着浏览器宽度调整大小的刚性顶部空间。
为了解决这个问题，我在绝对定位图像之后放置了图像的副本并设置了它的visibility: hidden; 我不得不添加一点额外的边距底部以弥补高度的差异，但最后结果是页面上的所有内容都精确地流动到正在使用的图像的高度。
我还使用了上面 unexplainedBacn 描述的填充技巧，这也是一个很棒的技巧。这需要一点数学，但我投票赞成这个答案。很好的解决方案。
【讨论】：