css使用小技巧
当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时,计算结果是参照父元素的宽度
可以把这一特性用作一些特殊处理的小技巧,比如高度自适应问题,还有我最近了解到的图片占位,避免图片等资源加载的时候出现闪烁抖动
html:
<div class="father">
<div class="childern">
<img :src="bgImage" alt="">
</div>
<div class="childern">
<img :src="bgImage" alt="">
</div>
</div>
css:
.childeren{
position: relative;
width: 50%;
height: 0;
padding-top: 40%;
display: inline-block;
overflow: hidden;
}
img{
position: absolute;
top:0;
left: 0;
width: 100%
}
这样就能实现图片根据父元素的宽度自适应,等比显示了