background-imageで画像をぼかさずフルサイズにする方法

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;
ただ単に、画像を繰り返すかどうかの設定です。
これは、背景画像を繰り返して使うときには、よく使います。

リファレンス:https://natsukimemo.com/css-fullscreen

もりけん塾
もりけん先生ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です