是否需在HTML的<img>元素中添加width/height属性，而非仅通过CSS设置？

PowerMapper的警告是属实的，但并非CSS设置宽高完全无法避免页面重绘——核心问题出在浏览器的渲染顺序，以及传统CSS方案的局限性。

为什么只靠CSS会出现布局跳动？ #

浏览器渲染页面时，会先解析HTML构建DOM树。如果<img>没有在HTML里指定width/height属性，浏览器在加载图片文件前，不知道这张图应该占据多大空间，会先按文档流默认规则布局。等图片下载完成、同时CSS规则解析生效后，浏览器才会根据CSS里的宽高值重新计算图片的占位，触发重排（reflow），也就是你看到的“布局跳动”。

CSS的宽高设置之所以没法提前占位，是因为CSS的解析时机晚于HTML的初始DOM构建——哪怕是内联CSS，浏览器也得先读到<img>元素，再匹配对应的CSS规则，这个过程中图片还没加载的话，页面还是会先留空或用默认尺寸。

不用HTML属性，靠CSS怎么避免跳动？ #

现在有几种现代CSS方案可以实现内容与表现分离，同时提前给图片预留空间：

• 使用aspect-ratio属性：这是最直接的方法，比如给图片设置固定宽度和宽高比：

  img {
    width: 100%;
    aspect-ratio: 16/9; /* 按实际图片比例设置 */
    object-fit: cover; /* 可选，控制图片缩放方式 */
  }
  

  浏览器会根据宽高比自动计算出高度，提前预留出空间，不管图片有没有加载，布局都不会变动。
• 旧浏览器兼容方案（padding-top模拟宽高比）：给<img>套一个容器，用容器的padding-top来模拟比例，再让图片绝对定位占满容器：

  .img-container {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9的比例，9/16=0.5625 */
  }
  .img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  这种方式能让容器提前占据正确的空间，避免后续布局跳动。

总结 #

你坚持内容与表现分离的思路完全没问题，不用在HTML里添加width/height属性。PowerMapper的警告更多是针对未使用现代CSS占位技巧的场景，用上面的方法就能既遵守分离原则，又解决布局跳动的问题。

内容的提问来源于stack exchange，提问作者Cecil Ward