设置min-height:100vh的Hero Image大屏过大，如何限制高度且不影响叠加层

最优方案（兼容现代浏览器） #

核心逻辑是通过CSS min() 函数动态控制最小高度的阈值，无需额外媒体查询，也不会影响内部叠加层的定位：
你只需要修改.bg-img的样式如下：

<div className="bg-img">
  <!-- 你的叠加层代码放在这里即可 -->
</div>

.bg-img {
  /* 新增属性 保证内部绝对定位的叠加层相对当前容器定位 */
  position: relative;
  /* 替换原来的min-height:100vh，1080px可按需调整为你需要的高度上限 */
  min-height: min(100vh, 1080px);
  width: 100%;
  background-image: url('https://storage.googleapis.com/youfit-assets/nologo.png');
  background-size: cover;
  /* 新增属性 避免高度裁剪后图片显示区域偏移 */
  background-position: center center;
}

生效逻辑说明 #

• 小屏设备（视口高度 < 你设置的上限值）：自动取100vh作为最小高度，和原有效果一致，占满整个视口
• 大屏设备（视口高度 > 你设置的上限值）：自动取你设置的上限值作为最小高度，容器不会随视口继续增高，图片不会异常变大
• 未固定容器的height属性，如果内部内容/叠加层高度高于当前最小高度，容器会自动撑开，完全满足你不能直接使用固定height的要求

兼容旧浏览器方案 #

如果需要兼容不支持min()函数的旧浏览器，可以使用媒体查询实现同样的效果：

.bg-img {
  position: relative;
  max-height: 1080px; /* 高度上限，和媒体查询的阈值保持一致 */
  width: 100%;
  background-image: url('https://storage.googleapis.com/youfit-assets/nologo.png');
  background-size: cover;
  background-position: center center;
}

/* 仅在视口高度低于上限时启用100vh最小高度 */
@media (max-height: 1080px) {
  .bg-img {
    min-height: 100vh;
  }
}

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