需求:在进入页面时,如果图片还没有加载进来应该给到它一个预留位置;不然如果不预留等图处加载进来就会蹭的一下把文字挤下去会不太好看;
所以我们可以用css来实现
.food .food-wrapper .food-content .img-wrapper{
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
}
为什么要用padding-top:100%?height为0?因为不确定图片的高;但是它有宽度,padding 100%会跟着width设定的宽度来形成一个正方形