<img> 标记

<img> 标记上设置 widthheight 属性有助于防止布局偏移。此信息使浏览器可以为图片预留正确的空间量。

  • 设置 widthheight 属性:这些属性的值应设置为匹配图片本身的尺寸(即其固有尺寸),而不是图片的显示尺寸。

  • 根据需要调整图片样式:根据图片的现有样式,添加 widthheight 属性可能会导致图片的渲染效果不同。在许多情况下,可以通过向现有样式添加 height: autowidth: 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">