是否可以实现以下逻辑通用HTML和CSS?

width: 100%;
height: 30% of width;

我要实现的目标:
如果我减小宽度,则高度也会成比例地减小。

最佳答案

填充百分比

这可以通过提供元素height:0padding-bottom:30%来实现。

在所有浏览器中,当以%指定填充时,填充是相对于父元素的宽度进行计算的。这对于响应式设计可能是非常有用的功能。

JSFiddle Demo

demo中,页面顶部的蓝色框是一个div。高度是响应性的,它可以包含可变数量的内联内容,而不会增加高度。它在IE7 / 8/9/10,Firefox,Chrome,Safari和Opera中测试得很好。

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

填充百分比和绝对位置

如果使用0高度元素存在任何问题,则demo还具有一个绿色框,该绿色框使用包装元素和绝对位置实现。不确定这种方法是否有任何优势。
.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

关于html - 响应高度与宽度成比例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11535827/

10-12 12:39
查看更多