[CSS] 画面幅いっぱいに画像を表示させ、レスポンシブ時に画像の高さを自動で変える方法

Contents

タイトルが長い
画面幅いっぱいに画像を表示させ、幅が変わっても画像の高さを自動で変える方法
画像を画面の最下部に固定する方法
まとめ

タイトルが長い

画面幅いっぱいに画像を表示させ、レスポンシブ時に画像の高さを自動で変える方法……

って伝わりますかね…

バナーとかの画像を画面幅いっぱいに表示させて、画面幅が変わっても幅が見切れずに、かつ画像の高さが自動で変わってほしいな〜っていうこと、ありますよね。

結構よく使うけど、いつも忘れるので、まとめとこうと思います。

前回ブログはこちらから↓

画面幅いっぱいに画像を表示させ、幅が変わっても画像の高さを自動で変える方法

html はこれだけ用意しておきます。

<div class="image"></div>

CSSはこちら。

.image {
    width: 100%;
    height: 0;
    background-image: url('./img/plant_image.jpg');  /* 画像のパス */
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: calc((640 / 1920) * 100%);  /* (画像高さ / 画像幅) x 100% */
  }

これだけで、レスポンシブ対応もできてめちゃ便利！

サンプルはこちら↓

サンプルはコチラ

画像を画面の最下部に固定する方法

ついでに、画像を画面の最下部に固定する方法もまとめておきます。

footer 画像を画面最下部に固定したいときなどに役立ちます。

div>文字がこれだけ</div>
  <footer></footer>

html{
  min-height: 100%;
  position: relative;
  } 
  footer {
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0; 
    background-image: url('./img/footer_image.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom: calc((150 / 1920) * 100%);  /* (画像高さ / 画像幅) x 100% */
  }

html 要素に min-height: 100% を指定するのがキモっぽい。

サンプルはこちら↓

サンプルはコチラ