ページヘッダ図(banner図)の実現テクニック

    ![](food.image)

問題:画像の高さを直接設定するのはだめです.画像の幅はスクリーンの幅の影響を受けているので、高さも相応の変化をしなければなりません.高さを設定しないと、ネットワークの状況に応じて次のページのレイアウトが変更され、フラッシュが発生し、解決しにくい:コア: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%;
    }
 }