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% }