3

我有一个设置为 amax-width:780px且高度未声明的容器。在容器内，有一个图像幻灯片。页面上的所有内容都是响应式的，因此随着宽度的减小，图像（宽度设置为 100%）会调整高度容器。

幻灯片将图像更改为不再“保持打开”容器的图像，因为它不被视为容器的display:static;内容 position:absolute;

是否有任何创造性的解决方案来获取绝对定位的子元素的高度？

下面的示例在主容器上没有声明任何高度.. 没有任何东西将其保持打开状态。 http://dhut.ch/test/santos/

谢谢！

4

4 回答 4

6

图像尺寸都一样吗？如果是，您可以padding-top在包含图像的元素上使用百分比。

所以，如果你的图片都是 760px 宽 x 500px 高，那就是 500/760 = .65789

百分比将转化为以下内容：

#main { 
    position: relative; 
    max-width: 760px;
    padding-top: 65.789%;  
}

之所以有效，是因为padding如果它设置为百分比，它会被计算为width的百分比。随着元素的宽度缩小，高度将按比例缩小，并且盒子将保持相同的宽高比。绝对定位的图像不会增加盒子的高度。

只要您的图像具有相同的纵横比并且您不期望该比率发生变化，这将起作用。如果您将使用大量随机图像，那么这不适合您。

于 2011-08-10T19:29:38.947 回答
2

我最近遇到了一个类似的图像问题，我需要将其绝对定位在 Zurb Foundation 模板页面的顶部，以便将其拉出流程并重置其尺寸（图像必须拉伸到包装器的边缘，而不是被封闭由其父 .row 填充）。然而，当然，这意味着它下方的所有流体响应元素都会在图像顶部弹出。设置 margin-top 或将兄弟元素定位在下面意味着一个刚性的顶部空间，它不会随着浏览器的宽度调整大小。

为了解决这个问题，我在绝对定位的图像之后放置了图像的副本并设置它visibility: hidden;我必须添加一点额外的边距底部以弥补高度的差异，但最终结果是页面上的所有内容正好流到正在使用的图像的高度。

我还使用了上面 unexplainedBacn 描述的填充技巧，这也是一个很棒的技巧。这需要一点数学，但我投票赞成这个答案。很好的解决方案。

于 2013-06-20T17:55:09.113 回答
1

我认为你最好改变你的方法。对于滑块，最好的做法是浮动容器的子元素，并使用一种已知的技术来防止父元素的大崩溃。因此，我建议您position: absolute从图像中删除 CSS 规则并将它们浮动在您<div id='main'>的 .

  1. div#main {overflow: hidden;}
  2. div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
  3. <div style='clear: both;'>在主 div 容器的末尾添加一个。
于 2011-07-30T07:54:34.270 回答
0

删除绝对位置。我也会避免内联样式。

于 2011-07-30T07:43:19.290 回答