当たり前の話ですが、画像サイズを可変にしたいときなどは、ついwidth=”100%”と付けてheightを指定しないといった方法を取る人がいます。
何故かというとwidth=”100%”で指定するだけで縦横比を維持したまま可変してくれるからです。
ただ、これですとLighthouseなどのツールでCLS(Cumulative Layout Shift)の改善を求められることもあります。
では、どうするのかというと特に難しくなく下記のようにwitdhとheightには画像のサイズを指定して、cssでwidth:100%; heigt:auto;とすれば縦横比を維持したまま可変してくれます。
display:blockは何故指定しているのかというと、imgタグはインライン要素なので、上下に空きができてレイアウトのズレが出るからです。
私の場合は大体このパターンで組んでいます。
HTML
<img src="img.jpg" width="400" height="300" alt="代替テキスト" />
CSS
img{
display:block;
width:100%;
height:auto;
}