WordPress更新后首页响应式失效：Hero图不占满、拉伸浏览器页面无限增高如何修复

• 页面无限增高的触发逻辑：WordPress更新后，原主题/首图配套插件的自适应高度计算脚本出现兼容问题，在浏览器resize事件触发时，反复给Hero容器叠加高度值，形成计算循环，最终表现为调整窗口大小时页面会无限制持续拉高。
• Hero首图无法填满的原因：这里存在一个对CSS盒模型的常见误解——.banner .item是承载CSS背景图的容器，背景图属于装饰层元素，不会参与盒模型的高度计算。你之前追加的height:auto只会让容器匹配内部嵌套文字、按钮的实际高度，根本撑不起整屏首图的视觉效果；这也是为什么硬编码固定像素值时显示正常：固定高度直接给了容器明确的尺寸边界，配合background-size: cover刚好能铺满。
• 自定义样式不生效的原因：WordPress更新后调整了样式加载优先级，你写的自定义规则被主题自带的更高权重样式覆盖，没有实际应用到元素上。

• 第一优先级：打断无限增高的循环
  先给整个Hero区域加硬性高度上限，从CSS层面阻断错误脚本的无限制拉伸效果，避免页面越拉越长：

  .banner, .banner .item {
    max-height: 100vh;
    box-sizing: border-box;
  }
  

  如果后续排查到是首图插件的自动视口高度计算功能触发的bug，可以直接在插件设置里关闭这个自动计算选项，从根源去掉重复触发的脚本逻辑。

• 第二优先级：配置自适应的Hero高度，替代硬编码像素值
  完全不需要写死700px这类固定高度，用纯CSS视口单位做适配，既保证响应式效果，也不会依赖JS计算避免兼容问题：

  .banner .item {
    width: 100%;
    /* 老浏览器 fallback 写法 */
    height: 80vh;
    /* 现代浏览器生效：视口80%高度，最高不超过700px */
    height: min(80vh, 700px);
    /* 移动端最小高度，避免内容挤压 */
    min-height: 450px;
    /* 保留原有背景图适配逻辑 */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }
  

• 第三优先级：让自定义样式真正生效
  写完上面的CSS规则后，按顺序完成检查：

  • 把样式块放到WordPress后台「外观-自定义-额外CSS」的最顶部，保证加载顺序在主题原生样式之后，提升规则权重
  • 清空站点所有层级的缓存（缓存插件、服务器端缓存、浏览器本地缓存），避免旧样式残留覆盖新规则
  • 如果站点开了CSS延迟加载功能，把这个自定义样式块排除在延迟加载范围外，避免首屏加载时样式暂时失效

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