这里学习到的是当margin padding 赋值为%百分比的时候,是按父元素的width为参照物,于是很多应用来先占位布局,再加载元素,例如图片的加载,防止页面抖动或闪一下的感觉,尤其网站状况不佳的情形下很容易出现!
下面是一个应用padding 百分比的例子:
<div class="image-header" ref="imageHeader">
<img class="image image-hook" :src="food.image"/>
<i @click="goback" class="icon-arrow_lift back-left"></i>
</div>
.image-header
position relative
width 100%
height 0
padding-top 100%
background-color gray
.back-left
position absolute
left 20px
top 30px
padding 5px
color white
font-size 26px
background-color rgba(7,17,27,0.2)
img
position absolute
top 0
left 0
width 100%
// height 100% 加了这里图片拉伸了
注意上面的注释部分,height:100% 开启后图片显示就是一个正方形的比例,如果图片本身不是一个正方形的比例,会看到明显的被拉伸,用户感觉不是很好!
本人没有想到好的从css写法上来解决的办法,最后依赖js处理了。效果还是可以的!
this.$nextTick(() => {
var imageWrapper = this.$refs.imageHeader;
var img = imageWrapper.getElementsByClassName('image-hook')[0];
imageWrapper.style.paddingTop = `${img.offsetHeight}px`;
});