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 更新]