负责任地改变div尺寸保持高宽比当我给一个图像百分之一的宽度或高度,它会增长/缩小,保持它的纵横比,但如果我想要与另一个元素相同的效果,它有可能把宽度和高度用百分比绑在一起吗?
3 回答

UYOU
TA贡献1878条经验 获得超4个赞
padding-top
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let's see it! */
color: white;
}
<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>

慕娘9325324
TA贡献1783条经验 获得超4个赞
<style>#aspectRatio{ position:fixed; left:0px; top:0px; width:60vw; height:40vw; border:1px solid; font-size:10vw;}</style><body><div id="aspectRatio">Aspect Ratio?</div></body>
vw
vh
- 3 回答
- 0 关注
- 434 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消