PageSpeed InsightsにWebページ診断を行った際に、CLSの問題点として
- レイアウトシフトが起きている
- 画像のwidthとheightが指定されていない
などと指摘される場合がある。
サイズ指定は「width:100%」「height:auto」としているのだが、それではだめらしい。
しかし、画面いっぱいに画像を表示したい+レスポンシブ対応もさせたい。
元画像の縦横サイズが分かっていれば大丈夫
width:100%の場合、高さの指定は以下で可能。
height:calc(100vw * (画像の縦サイズ / 画像の横サイズ))
上記で算出することで、autoという曖昧なものではなく縦サイズをしっかり指定したことになる。
こちらにより、可変サイズ画像の部分のCLSが改善された。
