问题:图片的宽度100%,高度要始终自适应为16:9。
解决方案:
1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。
2、但是,我们的原则是能用css实现的功能尽量用css,这有利于后期项目的维护。css同样可以实现这个问题,我们可以利用边距的百分比属性定义来优雅实现。
我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面。
那么外面盒子宽度100%,高度0,但是因为有padding-bottom为9/16的比例,所以外层盒子始终是16:9等比例,再绝对定位设置图片宽高都100%即可。
<div class="scale">
<img src="" class="item"/>
</div>
css代码:
.scale {
width: %;
padding-bottom: 56.25%;
height: ;
position: relative;
} .item {
width: %;
height: %;
background-color: aquamarine;
position: absolute;
}
这样即可,比较简单,就是思维上的灵活运用。