【CSS】画像サイズを合わせる方法｜object-fitの使い方

CSSで画像サイズを合わせる2つの方法

画像を親要素の幅に合わせる（max-width）

横幅だけを親要素に合わせて、高さは画像の縦横比のまま決まればよい場合は、imgに次の2行を指定します。

max-width: 100%は、画像を親要素の幅より大きくしない指定です。画像のほうが親要素より小さい場合は元の幅のまま表示され、引き伸ばされません。

height: autoは、HTMLのimgにwidth・height属性を書いている場合に必要です。height: autoを書かないと、幅だけが縮んで高さは属性の値のまま残り、画像が縦に伸びて表示されます。

この方法では、縦横比が違う画像を並べると高さがそろいません。

縦横比が違う画像を同じサイズで表示する（object-fit）

object-fitを使うと、画像と枠の縦横比が合わないときに、はみ出た部分を切り取るか、足りない部分を余白にするかを値で選べます。

object-fitとは

object-fitは、imgやvideoに指定した幅と高さの中に、画像や動画をどう収めるかを決めるCSSプロパティです。

object-fitで画像を枠に合わせるには、imgの幅と高さを両方決めておきます。親要素にだけ幅と高さを指定し、imgが元の縦横比のまま表示されている状態では、object-fitを書いても見た目は変わりません。

親要素を枠にする場合は、imgにwidth: 100%とheight: 100%を指定して、imgを枠と同じサイズに広げます。

object-fitのブラウザ別対応状況

現在の主要ブラウザ（Chrome・Edge・Firefox・Safari）はすべて対応しているので、ベンダープレフィックス（-webkit-などの接頭辞）や古いブラウザ向けの対策は要りません（MDN: object-fit）。

object-fitの値一覧

次の横長の画像を正方形の枠に入れて、object-fitの値ごとの見え方を比べます。灰色の線が枠です。

fill（初期値）

contain

cover

none

scale-down

このデモのscale-downがcontainと同じ表示なのは、画像が枠より大きいからです。画像が枠より小さい場合はnoneと同じく元のサイズで表示され、枠に合わせて拡大されません。

object-fit: coverとcontainの違い

coverとcontainの違いは、画像と枠の縦横比が合わないときの収め方です。containは画像全体を枠に収めて余白を残し、coverは枠を埋めてはみ出た部分を切り取ります。

画像全体を見せたい場合はcontain、枠に余白を出したくない場合はcoverを選びます。

正方形の枠に表示すると、横長の画像はcontainで上下に余白が出て、coverで左右が切り取られます。縦長の画像では逆に、containで左右に余白が出て、coverで上下が切り取られます。

contain

cover

画像サイズを枠に合わせるCSS

枠のサイズをpxで固定する

枠にするdivに幅と高さを指定し、中のimgを枠いっぱいに広げてからobject-fitを指定します。

縦横比が違う画像も、.thumbnailに指定した幅と高さで表示されます。画像を切り取らずに全体を見せたい場合は、coverをcontainに変えます。

枠を画面幅に合わせて伸縮させる

枠に幅と高さを指定する代わりに、aspect-ratioで縦横比を指定します。divは親要素の幅いっぱいに広がり、高さは幅とaspect-ratioから決まります。HTMLは、imgを<div class="thumbnail">で囲みます。

aspect-ratio: 4 / 3は「幅4に対して高さ3」の比率です。正方形にする場合は1 / 1にします。aspect-ratioも、現在の主要ブラウザ（Chrome・Edge・Firefox・Safari）はすべて対応しています。

imgのdisplay: blockは、画像の下にできる隙間を消すための指定です。imgは初期状態では文字と同じ行に並ぶ要素なので、画像の下にわずかな隙間ができます。pxで固定した枠では見た目に影響しませんが、aspect-ratioで作った枠では隙間の分だけ枠が縦に伸びて、縦横比がずれます。

枠にwidthとheightを両方指定していると、aspect-ratioは効きません。「枠のサイズをpxで固定する」のコードを書き換える場合は、.thumbnailのwidthとheightを消してからaspect-ratioを足します。

画像を切り取る位置を変える（object-position）

object-fit: coverでは、初期状態だと画像の中央が残り、上下または左右の端が切り取られます。object-positionの初期値が50% 50%（中央）だからです。

人物の顔や建物など、残したい部分が中央から外れている場合は、.thumbnail imgにobject-fit: coverを指定したCSSはそのままにして、次の指定を足します。

center bottomは「横は中央、縦は下端」に合わせる指定です。left・right・topなどのキーワードのほか、50% 100%のように割合でも書けます。割合で書く場合は、1つ目が横、2つ目が縦の位置です（MDN: object-position）。

縦長の画像を正方形の枠にcoverで表示し、初期値とcenter bottomを比べると次のようになります。

初期値（50% 50%）

center bottom

よくある質問

Q. object-fitを指定したのに画像が変わらないのはなぜですか？

A. img自身の幅と高さが決まっていない可能性があります。次の3点を確認してください。

heightに取り消し線が付いていた場合は、上書きしているCSSよりも詳細度（どのCSSを優先するかを決める強さ）の高いセレクタで指定し直します。それでも上書きできない場合は、!importantを付けます。

Q. background-sizeのcover・containとの違いは何ですか？

A. 使う対象が違います。background-sizeはCSSの背景画像（background-image）に、object-fitはHTMLのimgやvideoに使います。

coverとcontainの意味は、object-fitと同じです。coverは枠を埋めてはみ出た部分を切り取り、containは画像全体を枠に収めます。ただしbackground-size: containは余った部分に画像が繰り返し並ぶことがあるので、background-repeat: no-repeatもあわせて指定します。

Q. object-fitは動画（video）にも使えますか？

A. 使えます。videoに幅と高さを指定してobject-fit: coverにすると、動画と枠の縦横比が違っても、枠を埋めて表示できます。

まとめ