网页头图(banner图)的实现技巧

<div class="image-header">
    ![](food.image)
</div>

问题：直接设置图片高度不行，因为图片宽度受屏幕宽度的影响，
高度也应该做出相应的改变；
不设置高度，会随网络情况改变下面网页布局，出现闪动，不太好
解决：
核心：当设置padding-top:100%时，此时容器的padding和宽度相等

/* scss写的css代码 */
.image-header{
    position:relative;
    width:100%;
    height: 0;
    padding-top:100%;
    img{
        position:absolute;
        top:0px;
        left:0px;
         width:100%;
        height:100%;
    }
 }