<img> タグに width 属性と height 属性を設定すると、レイアウト シフトを回避できます。この情報により、ブラウザは画像用に適切な量のスペースを予約できます。
width属性とheight属性を設定する: これらの属性の値は、画像が表示される寸法ではなく、画像自体の寸法（固有のサイズ）と一致するように設定する必要があります。必要に応じて画像のスタイルを調整する: 画像の既存のスタイル設定によっては、
width属性やheight属性を追加すると、画像のレンダリングが異なる場合があります。多くの場合、この問題は既存のスタイル設定にheight: autoまたはwidth: autoを追加することで修正できます。
| 以前の CSS スタイル | 次のように変更 |
|---|---|
| img { width: 100%; } | img { width: 100%; height: auto; } |
| img { max-width: 100%; } | img { max-width: 100% height: auto; } |
| img { height: 100%; } | img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">