CLSの対策としてimgタグにwidthとheightを指定したがレスポンシブデザインでブラウザ幅にあわせて画像サイズもかえると縦横比がおかしくなってしまう
調べると以下のスタイルで解決できた
object-fit: contain;
object-fitは画像をボックスのどこにはめ込むかを指定することができる
IE以外のブラウザなら利用が可能
■ contain
アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小される
オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になる
■ cover
アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小される
オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られる
■ fill
要素のコンテンツボックス全体を埋めるサイズになる
オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされる
■ none
拡大縮小されない
imgタグに指定した幅と高さが適用される
■ scale-down
none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用する
