縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法

縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法

スポンサードリンク
縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 月額費用0円!格安ホームページ制作ならアットウェブへおまかせ♪
  • このエントリーをはてなブックマークに追加

背景画像を指定する際、例えば1000*600pxの画像であれば、以下のように指定するのが一般的なやり方かと思います。

.content{
background: url(bg.jpg) 0 0 no-repeat;
width: 1000px;
height: 600px;
}

ですが、上記のやり方だとレスポンシブ対応をする場合、細かい調整が必要になり結構面倒です。

というわけで、背景画像に固定値を指定せずに横幅100%で可変表示させたい、といった場合に便利な手法をご紹介したいと思います。

縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法

背景画像を横幅いっぱいに表示させるためには、CSSで以下のように指定します。

.content{
background: url(bg.jpg) 0 0 no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: calc( 600/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
}

まず「width: 100%;」で要素を横幅いっぱいに指定し、「height: 0;」で高さをなくします。そのうえで、padding-topで画像の高さを確保しています。

あとがき

レスポンシブ対応のサイトで使える手法なので、覚えておくと便利です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。