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