【CSS】object-fitで画像をアスペクト比を維持したままコンテンツにおさめる

CLSの対策としてimgタグにwidthとheightを指定したがレスポンシブデザインでブラウザ幅にあわせて画像サイズもかえると縦横比がおかしくなってしまう

調べると以下のスタイルで解決できた

object-fit: contain;

developer.mozilla.org

object-fitは画像をボックスのどこにはめ込むかを指定することができる

IE以外のブラウザなら利用が可能

■ contain

アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小される

オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になる

■ cover

アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小される

オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られる

■ fill

要素のコンテンツボックス全体を埋めるサイズになる

オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされる

■ none

拡大縮小されない

imgタグに指定した幅と高さが適用される

■ scale-down

none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用する