背景画像の縦横比を維持したままボックスをリサイズ

レスポンシブなCSSを書こうとすると背景画像の縦横比を維持しながらボックスをリサイズしたいケースが増える。divの中にimgを置いてどうにかしようとするとかなり難しい

divの背景に画像を指定してやれば、divの縦横比と画像の縦横比が一つになるのでわかりやすい。

忘備録的な感じでCSSの書き方をまとめてみた。

前提条件

背景に画像を表示したdivをリサイズするときに画像の縦横比を維持したい。
448×314の画像をリサイズするものとする。
縦横比を保持してdivを完全に覆うように表示するものとする。

CSS

<div style="-mox-box-sizing: border-box;
            box-sizing:border-box;
            width:100%;
            min-height:100px;
            padding-top:70.1%;
            background-size:contain;
            background:url(hoge.png) center center no-repeat;
            text-align:left;">
</div>

divの高さを確保するためにpadding-topを指定するのがポイント。
padding-topの値として、縦横比(縦/横*100)を指定する。
448×314の場合、314/448*100=70.1%。

background-sizeとしてcontainを指定すると、縦横比率を保持して表示領域を完全に覆うように表示する。
coverを指定すると、縦横比率を保持して表示領域内で画像がすべて収まるように表示する。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする