现在我们来讲讲做自适应16:9的矩形要怎么做
第一步先计算高度,假设宽100%,那么高为h=9/16=56.25%
第二步利用之前所说设置padding-bottom方法实现矩形
代码
HTML
<div class="box">
<div class="scale">
<p>这是一个16:9的矩形</p>
</div>
</div>
css
.box { 80%; } .scale { 100%; padding-bottom: 56.25%; height: 0; position: relative; } .item { 100%; height: 100%; background-color: aquamarine; position: absolute; }