如何设置div容器默认高度 适配响应式CSS自动调整

你当前给容器设置固定height: 532px属于绝对长度值，不会随容器宽度、屏幕尺寸变化自动调整，因此小屏幕下高度始终固定，无法适配响应式场景。

用CSS Grid层叠方案实现，不需要手动计算宽高比，兼容所有现代浏览器，同时满足两个核心要求：

• 容器默认最小高度为532px，图片高度不足时自动撑满容器
• 屏幕尺寸变化时，容器高度可跟随图片自适应高度自动调整
  完整代码如下：

.inside-img{
  /* 和占位元素同属一个网格区域，撑满容器 */
  grid-area: 1/1/-1/-1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container{
  width: 100%;
  /* 开启Grid布局实现层叠效果 */
  display: grid;
}

/* 伪元素作为占位，撑起容器默认最小高度 */
.container::after{
  content: '';
  grid-area: 1/1/-1/-1;
  min-height: 532px;
}

实现原理 #

• 利用Grid布局支持多元素同网格区域层叠的特性，不需要绝对定位即可实现填充效果
• 伪元素只负责撑起容器的最小高度，不影响正常内容显示
• 图片设置宽高100%会自动填满整个容器区域，object-fit: cover保证图片无变形裁剪
• 当屏幕尺寸变化、图片按100%宽度自适应后的高度大于532px时，图片本身会把网格单元格撑高，容器高度自动跟随图片调整；当图片自适应高度小于532px时，伪元素会把容器高度稳定在532px。

如果你不需要容器高度跟随图片原始比例，而是希望大屏下高度为532px，小屏幕下按设计稿固定宽高比自适应缩放（常见于首页顶部Banner场景），可以用aspect-ratio属性实现，代码更简洁：

.container{
  width: 100%;
  /* 最大高度限制为默认高度 */
  max-height: 532px;
  /* 替换为设计稿中容器达到532px高度时对应的宽高比，例如1920*532的Banner就写1920/532 */
  aspect-ratio: 1920 / 532;
  position: relative;
  /* 防止高度过小过度裁剪图片 */
  min-height: 311px;
}

.inside-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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