CSS采用绝对定位子的高度

Question

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

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

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

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

谢谢!

Answer 1

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

因此，如果您的图片都是 760 像素宽 x 500 像素高，那就是 500/760 = .65789

百分比将转化为:

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

这样做的原因是，如果使用 padding 设置百分比，则计算为 宽度的百分比。随着元素的宽度缩小，高度将按比例缩小，并且盒子将保持相同的宽高比。绝对定位的图像不会增加框的高度。

只要您的图片都具有相同的宽高比并且您不希望该比例发生变化，这就会起作用。如果您将使用大量随机图像，那么这不适合您。