CSS Modules继承导致图片height:100%垂直变形问题求助

从你的描述来看，核心矛盾是相同样式在SPA中正常，但迁移到SSR后图片出现垂直变形，且移除height:100%虽能解决但不符合需求。结合你使用CSS Modules的情况，我整理了几个大概率的排查方向和解决方案：

1. 先排查SSR与SPA的渲染时机差异 #

SPA是客户端渲染，容器的尺寸是在DOM完全加载、JS执行后才确定的；但SSR是服务端直接生成HTML输出，此时如果父容器的高度依赖客户端环境（比如视口尺寸、动态计算的高度），服务端渲染时根本拿不到正确的父级高度值——这就会导致height:100%失去参考，图片被错误拉伸。

调试步骤：

• 打开浏览器开发者工具，查看SSR输出的原始HTML（右键“查看页面源代码”），检查图片的父容器是否有明确的高度属性（比如height: 300px），还是依赖客户端JS计算的动态高度。
• 如果父容器是响应式高度（比如依赖视口或父元素的动态尺寸），可以尝试在SSR阶段给父容器设置一个兜底的固定高度，再在客户端hydrate完成后替换为动态高度。

2. 检查CSS Modules的样式作用域与继承问题 #

虽然你说没修改样式，但SSR环境下CSS Modules的编译逻辑可能和SPA有细微差异（比如类名生成规则、样式注入顺序），导致某些全局样式或父元素的继承样式“意外”覆盖了图片的height设置。

调试步骤：

• 在浏览器开发者工具的“Elements”面板中，选中图片元素，查看“Computed”样式里的height属性，看它的实际来源是你的CSS Modules类，还是其他全局样式/父元素继承的样式。
• 检查父容器的样式，是否存在min-height、max-height或者display属性（比如flex、grid）的变化，这些都可能影响子元素height:100%的表现。

3. 补上object-fit属性，强制保持图片比例 #

即使height:100%生效，如果没有设置object-fit，图片会被强制拉伸以填满容器的宽高，自然会变形。原SPA中可能因为父容器的宽高比和图片一致，或者有其他隐式样式（比如父容器限制了宽高比）掩盖了这个问题，但SSR中这个条件消失了。

解决方案：
修改你的CSS Modules样式，给图片添加object-fit: cover（或contain，根据需求选择）：

/* 你的图片样式类 */
.image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：保持图片原始宽高比，同时填满容器 */
}

这个属性既能让图片填充容器，又不会破坏图片的比例，应该能解决变形问题。

4. 排查客户端Hydration的样式重绘问题 #

SSR生成的HTML在客户端hydrate时，样式的应用顺序可能和纯SPA不同——比如图片初始渲染时用了服务端的“占位”样式，之后没有正确触发重绘，导致变形一直存在。

解决方案：
如果使用React等框架，可以在组件挂载后（比如useEffect钩子）强制更新图片的样式：

useEffect(() => {
  const img = document.querySelector('.your-image-class');
  if (img) {
    // 强制触发重绘
    img.style.height = 'auto';
    setTimeout(() => {
      img.style.height = '100%';
    }, 0);
  }
}, []);

先试试上面的object-fit方案，这是最常见的图片变形解决办法，大概率能直接解决你的问题。如果不行，再按顺序排查渲染时机和CSS Modules的作用域问题。

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