我有这个设置:
<div class="wrapper">
<div class="container"> <div class="inner"></div></div>
</div>
.wrapper {
max-width:320px;
max-height:240px;
}
.container {
position:relative;
padding-top:56.25%;
background:green;
}
.inner{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
如果缩小窗口宽度,div 尺寸会缩小,同时保持纵横比,这正是我想要的。
但是,如果您缩小窗口高度,div 高度不会缩小,您将获得浏览器滚动。
有没有办法也实现第二个条件?
最佳答案
已更新 DEMO在这里。
将 padding-top
更改为 height
写:
html,body,.wrapper{
height:100%;
width:100%;
}
.container {
height:56.25%;
}
关于html - 具有比例的响应式 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24583351/