【CSS】object-fitで画像の大きさを揃える

はじめに#

　imgタグを使って画像を表示させたのはいいものの、大きさが合ってなくてガタガタになる・・・なんてことはないでしょうか。
CSSを使って大きさを揃えることができますので備忘録として残していきます。

object-fit#

　object-fitを使うことで画像を指定したサイズにフィットさせることができます。
object-fitは、コンテナに対して、画像や動画をどのように表示するかを設定します。

style.css

 image{
     object-fit: contain;
 }

このように指定することで、縦横比を維持しつつコンテナからはみ出さないようフィットさせることができます。

色々な値#

object-fitプロパティには、contain以外にも様々な値を設定することができます。

・fill:縦横比を無視して画像をコンテナにフィットさせます。
・cover:コンテナに余白が出ないよう、全体を覆う形で表示されます。はみ出す部分はトリミングされます。
・none:画像のリサイズはせずに縦横中央に配置します。
・scale-down:コンテナより画像が大きい場合はcontain、小さい場合はnoneを指定します。

終わりに#

便利なプロパティなのでぜひ使ってみましょう！