background-image で比率を維持しながらレスポンシブ表示させる。

background-image で比率を維持しながらレスポンシブ表示させる。
ボックスのサイズ比率を維持しながら、背景に画像をいれ、その背景画像の比率も維持するためのCSSです。
これによりレスポンシブなサイトを作る上で、背景画像を入れたボタンなどを作るときに便利になります。

画像を使ったボタンや、PCやスマホ向けに画像を切り替える場合など、CSSだけで処理できるので便利です。

やり方:
高さを0px指定し、padding-topに比率を入れます。
padding-topの値は、「横幅 / 高さ * 100」となります。(小数第二位で切り捨て)


仮に、横幅800px x 縦幅150px の画像の場合
300/800*100=18.75となります。

□ CSS
.box {
height:0;
padding-top:18.75%;
background-image:url("background_image.jpg");
background-position:0 0;
background-repeat:no-repeat;
background-size:contain;
}


□ HTML
<div class="box"></div>


サンプルデモ
画面サイズを変えると、比率が維持されると思います。



□ 関連記事
Facebook のソーシャルカウント数を取得する
大量のファイルを tar したい時のメモ
さくらインターネットの.mailfilterを使って、件名が英数字、記号のスパムに対策をしました。
パラメータ付URLを.htaccessでリダイレクトするメモ
[Add-on Stylish] Web版Twitterのタイムラインに表示される画像、プロモーションの表示を設定するStylishのCSS (暫定)
画像をクリックするとその場で拡大表示するようにしました。
[Add-on Stylish] Twitterが更新されていたので、プロモ、お勧めフォロワ、画像などを表示させない様にする。 [2015/10/28 更新]

2016.09.06

コメント投稿フォーム