<img> タグ

<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">