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