背景図全画面表示------css(vw/vh)

前に背景図のサイズを設定する例に遭遇したり、設定したりしました.

background-size:100%; 

または設定

background-size:cover;

一般的にこの2つは背景図の大きさの問題を解決することができますが、私は1つの機能に出会ったことがあります.私の背景画像がどんなに大きくても、それは私の画面の大きさによって全画面表示されなければなりません.この時、100%coverはもう私の要求を満たすことができません.友达からcssの2つの属性を知っています.vw(viewwidth)とvh(viewheight);これは、画面の大きさがどのように変化しても、背景図が全画面表示されることです.

1.html部分

2.css

  *{
        margin:0;
        padding: 0;
        list-style: none;
    }
  body{
        width:100%;
        height:100vh;
        position: relative;
        background-image: url('./images/banner.jpg') ;
        background-repeat: no-repeat;
        background-size: 100vw 100vh;
}
  .header{width:100%;height:100%;}

学んだ知識を繰り返し練習し,頭の中にしっかり覚えるようにしなければならない.