鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

CSSで画像の大きさによらず枠いっぱい画像を表示したい(cover)

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

画像の大きさが違ったり、縦長だったり、横長だったりする場合がありますよね。 そういう時に、兎にも角にも枠いっぱいに画像を表示してほしい、という時に便利なのが、 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タグで同様のことをしたい

時期的には少し遅れてimgタグでも同様のことができるようになりました。 IEには対応していないようですが、 object-fit というのが使えるようです。

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