CSS object-fitを使って画像を要素いっぱいに表示する
CSSのobject-fit
は画像を要素内でどのように表示するか指定するプロパティ。object-fitを使用すれば画像を縦いっぱい広げたり、上下隙間なく要素のサイズに合わせて拡大することができます。
関連記事
デモ
使い方
HTML
CSS
img
の親要素にwidth
height
を指定しますimg
にobject-fit
とwidth
height
を指定します
解説
よく使うのはobject-fit: contain
とobject-fit: cover
の2つ。覚えておきましょう。
object-fit: contain
アスペクト比を維持して拡大縮小。
object-fit: cover
アスペクト比を維持して要素全体に表示されるように拡大縮小。
object-fit: none
拡大縮小されずに表示。
object-fit: scale-down
object-fit: contain
とほぼ同じ。
小さいサイズの方が優先されます。
画像位置の調整「object-position」
object-position
で要素内の画像の位置を指定できます。
初期値は中央です。
左上
右上
左下
右下
数値と%でも指定可
左上から計算されます。
よくあるトラブル
画像が縦に拡大されない
img
とその親要素にheight
を指定する必要があります。
例えば親要素div
にheight: 250px
、img
にheight: 100%
を指定してみましょう。
縦長画像は要素内に収め、横長画像は拡大する
object-fit
は便利ですが、縦長画像と横長画像どちらも拡大して表示されます。そこでJavascriptを使って縦長画像も要素内に収めるようにします。