页面加载时图片未应用CSS引发CLS问题，应如何修复？

• 先排查内联样式被覆盖的问题
  你写的内联样式未生效大概率是被优先级更高的外部CSS规则覆盖了，可以给内联样式加!important临时验证：

  <img ... style="width: 100% !important; object-fit: cover !important;" />
  

  验证生效后可以选择保留带!important的内联样式，或者调整外部对应CSS规则的优先级。
• 给父容器提前预留全宽空间
  给顶部蓝色区块的父容器加内联样式，预先占好全宽位置，避免加载时出现边距：

  <div class="顶部蓝色区块的类名" style="width: 100vw; overflow-x: hidden; aspect-ratio: 16/5;">
    <!-- 你的img标签放在这里 -->
  </div>
  

  把aspect-ratio的参数换成你实际banner的宽高比即可。
• 给img标签添加原生宽高属性
  这是W3C官方推荐的避免图片触发CLS的方案，直接填写图片的原始尺寸即可，浏览器会自动计算宽高比预留空间：

  <img 
    src="你的banner图片地址"
    width="1920" 
    height="600" 
    style="width: 100%; height: auto; object-fit: cover;"
  />
  

• 改用背景图实现（更推荐）
  直接把banner图作为父容器的背景，完全避免图片加载时序导致的布局偏移：

  <div style="width: 100vw; height: 600px; background: url('你的banner图片地址') center/cover no-repeat;">
  </div>
  

• 可选优化：预加载首屏banner图
  在页面head标签内添加预加载规则，加快图片加载速度：

  <link rel="preload" as="image" href="你的banner图片地址">
  

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