鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

CSSで画像の大きさによらず枠いっぱい画像を表示したい(background-size/object-fit: coverの使い方)

画像の大きさによらず枠いっぱい表示したい

画像の大きさが違ったり、縦長だったり、横長だったりする場合がありますよね。 そういう時に、兎にも角にも枠いっぱいに画像を表示してほしい、ということはよくあります。

画像の表示の仕方としては、 imgタグ を使う場合と、 background-image として画像を表示させる方法の二つが一般的ですが、このどちらでも、上記の「兎にも角にも枠いっぱいに画像を表示」をすることができます。

記事の一覧表示など、同じサイズの枠をたくさん並べる時に、画像のサイズが揃っていない場合でも、枠に合わせてくれるという便利な書き方なので、メモしておきます。

background-imageで画像を表示する場合

まず、表示する画像を span でくくって、 background-image で画像を指定します。

【HTML】

<span class="クラス名" style="background-image:url(画像場所);" alt=""></span>

  こうすることのメリットは、この後widthやheightを指定するときに、imgタグだとその横幅や縦幅を縦横比を考えずに引き伸ばしてしまうためです。

 続いて、スタイルで以下を指定します。

CSS

display: block;  *widthとheightはblock要素でないと指定できないため
width: 100%;
height: 100%;
background-size: cover;  
background-position: center center;

  こうすることで、画像のサイズがえらく縦に長かったり、横に長かったりしたとしても

枠に合わせて真ん中よせで表示してくれるようです。

imgタグを使う場合

background-imageでの backcground-size: cover という指定方法に、時期的には少し遅れてimgタグでも同様のことができるようになりました。 IEには対応していないようですが、 object-fit というのを指定します。

img {
  object-fit: cover;
  width: 100%;
  height: 100%
}