サムネイルの表示などでサイズのバラバラな画像をアスペクト比を崩さずに表示するためにbackground-imageとbackground-sizeをcoverを設定する方法があります。
実はobject-fitを使うとimgタグでも可能なのでそのやり方の紹介。
background-size: coverをimgタグで実現する
1000px×600pxの画像を300px×300pxにすると画像が崩れます。
object-fit:coverを指定する
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。
object-fit:containを指定
アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます
他にもfit, none, scale-downがあり下記リンクから確認できます。
参考
フロントエンド開発でお困りのことはありませんか？
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。
