background-imageで画像をぼかさずにフルサイズで表示する方法。
HTML
<div class=”img”>
<img src=./img/a.jpg alt=”” width=”” height=”” />
<img src=./img/a.jpg alt=”” width=”” height=”” />
<img src=./img/a.jpg alt=”” width=”” height=”” />
</div>
css
img {height: 100vh;width:auto;background-size: auto 100%;background-position: center;background-repeat: no-repeat;
}
こんな感じです。
順番にみていくと、
1,height: 100vh
viewport heightと言って、1%=1vhです。
じゃあ、%使えばよくね？と思われるかもしれませんが…
簡単に言うと、子要素の%は、親要素の%に左右されます。
一方、viewport単位は、viewportの寸法を基準としているため、要素の幅、高さ、サイズをviewportに合わせて設定しなければならない状況でとても便利です。
2,width:auto;
セクションの横幅の指定です。他の要素の指定を基に自動算出させるためautoを指定します。
3,背景画像のサイズを指定しています。
autoは横幅を、100%は高さの指定になります。ここでは単位が%であるところに注意です。
4,background-position: center;
これは、要素いっぱいに画像を広げた際に、画像を中央に寄せる指定です。
5、background-repeat: no-repeat;
ただ単に、画像を繰り返すかどうかの設定です。
これは、背景画像を繰り返して使うときには、よく使います。
コメント