img元素width/height属性与布局偏移问题排查

你遇到的问题核心是all: unset破坏了浏览器基于img的HTML width/height属性自动计算宽高比的默认逻辑，具体原因和解决办法如下：

• 为什么布局偏移重现？
  浏览器默认会读取img的HTML width和height属性，自动计算并应用对应的aspect-ratio CSS属性，以此提前预留空间避免布局偏移。但all: unset会将所有CSS属性重置为初始值，这包括清除了浏览器自动生成的aspect-ratio关联逻辑——哪怕你用display: revert恢复了显示类型，也没法恢复这个基于HTML属性动态计算宽高比的默认行为。

• 怎么修复？
  有两种简单的解决方式：

  1. 给img单独添加宽高比规则，明确关联HTML属性：

     img {
       aspect-ratio: attr(width)/attr(height);
     }
     

  2. 调整重置规则，不对img应用all: unset，比如把全局重置改成：

     *:not(img) {
       all: unset;
       display: revert;
     }
     

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