webmanab.html

menu

背景画像の指定に多様したい、CSSで縦横比を維持してレスポンシブに対応する方法 -『CSS』

　

レスポンシブに縦横比を維持しつつ横幅いっぱいに画像を表示するときのtipsです。

画像の比率を保って表示する

img要素だとwidth:100%;の指定で、親要素の大きさに合わせて画像は比率を保ったまま拡大縮小してくれます。

背景画像として比率を保って表示させる場合は少し記述を工夫する必要があります。
以下のコードで実装可能となります。

CSS


.img-box {
  width: 100%;
  height: 0;
  padding-top: calc(3000 / 4000 * 100%);
  /*calc(画像の高さ / 画像の幅 * widthの値)*/
  background-image: url('bg-image.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

幅の定義

背景画像を指定する要素の幅をwidthに指定します。

高さの定義

高さはpadding-topで決定するため、heightは0とします。
padding-topの値は「画像の高さ ÷ 画像の幅 × widthの値」でもとめることができます。
calc関数を使って値を演算しています。
こうすることで、画像が差し代わっても値を変更後のサイズに合わせて変更するだけで、対応することができます。

背景の定義

background-size: cover;とbackground-position: center center;で、サイズが変わっても画像の中心を固定して親要素いっぱいに表示させています。

おわります。

背景画像の指定に多様したい、CSSで縦横比を維持してレスポンシブに対応する方法 -『CSS』

share
ー

tag
ー

related
ー

tip