是否可以实现以下逻辑通用HTML和CSS?
width: 100%;
height: 30% of width;
我要实现的目标:
如果我减小宽度,则高度也会成比例地减小。
最佳答案
填充百分比
这可以通过提供元素height:0
和padding-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/