yuri memo

フロントエンド園児のメモ 💻👧📝

背景画像を隙間なく表示させる方法 - background-sizeの使い方

実務でもよく使うのでメモです。
サムネイルつきリストなどを作る際に、画像サイズが決まったサイズであれば特に問題はないのですが
CMS化してクライアントが直接更新作業する場合などは、必ずしもすべての画像サイズが同じとは限りませんよね。
そんな時にサムネイルに対して画像がうまく収まらないとこんな感じになってしまいます。
f:id:yurixxx8:20160822221250p:plain
高さが揃ってなくてあまりキレイじゃないですね。

いろいろ迷った結果、サムネイル画像を背景で表示させた。

はい、いろいろ試してみました。
あまり面倒なことはしたくなくてスマートな方法を探した結果、背景画像で表示させる方法に落ち着きました。
(もっといい方法がありましたら是非お教えくださいませ。)
肝心の実装方法ですが、jQueryとかなにも必要ないです、CSSだけで大丈夫です。

background-size:cover;を使う。

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。

background-size:cover;
・縦横比を保持
背景領域を完全に覆う最小サイズに背景画像を拡大縮小する
→画像がはみ出し、見えない部分も出てくるが隙間はできない

background-size:contain;
・縦横比を保持
背景領域に収まる最大サイズに背景画像を拡大縮小する
→画像の全体が見えるが隙間ができてしまう

分かりやすいように図にするとこんな感じです。
f:id:yurixxx8:20160822221254p:plain
背景領域に隙間を作らないためには、background-size:cover;を使うということになりますね。

書き方は以下の通りです。

<ul class="thumbnailList">
  <li class="thumbnail">サムネイル画像</li>
  <li class="thumbnail">サムネイル画像</li>
  <li class="thumbnail">サムネイル画像</li>
</ul>
.thumbnail {
    width: 160px;
    height: 150px;
    background-image: url(../img/sample.jpg);
    background-size: cover;
    background-position: center center;
}

※実際にCMS化する際は、書き方が少し変わりますが割愛させていただきます。

以上でした!
不明点、間違い等ありましたらコメントにてお知らせください。m(__)m