如何用纯CSS在可变尺寸div中自适应排布任意数量的摄像头画面？

完全可以通过纯CSS实现需求中的自适应摄像头画面布局，无需JavaScript介入。以下是具体实现思路和代码：

核心实现思路 #

利用CSS Grid的自动布局能力结合容器查询、:has()伪类，针对不同学生数量和容器宽高比动态调整布局：

• 单学生时，摄像头容器直接占满父容器
• 两名学生时，根据父容器宽高比自动选择横向并排或纵向堆叠
• 3名及以上学生时，自动调整列数，保持画面比例并平铺填满容器，无溢出

完整代码示例 #

HTML结构 #

<div id="webcams">
  <div class="webcam"><video src="your-video-source.mp4" autoplay muted></video></div>
  <!-- 更多.webcam元素动态添加 -->
</div>

CSS样式 #

/* 父容器基础样式 */
#webcams {
  display: grid;
  gap: 4px; /* 摄像头间的间距，可按需调整 */
  width: 100%;
  height: 100%;
  overflow: hidden; /* 确保内容不溢出容器 */
}

/* 单个摄像头容器样式 */
.webcam {
  position: relative;
  aspect-ratio: 16/9; /* 匹配摄像头画面的宽高比，可根据实际调整 */
}

.webcam video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，填满容器且不变形 */
}

/* 单学生场景：占满整个容器 */
#webcams:has(.webcam:only-child) .webcam {
  aspect-ratio: unset; /* 取消固定比例，自适应容器尺寸 */
}

/* 两名学生场景：根据容器宽高比调整排列方向 */
@container (aspect-ratio > 1) {
  #webcams:has(.webcam:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr); /* 宽大于高时横向并排 */
  }
}

@container (aspect-ratio <= 1) {
  #webcams:has(.webcam:nth-child(2)) {
    grid-template-rows: repeat(2, 1fr); /* 高大于等于宽时纵向堆叠 */
  }
}

/* 3名及以上学生场景：自动平铺排列 */
#webcams:has(.webcam:nth-child(3)) {
  grid-template-columns: repeat(auto-fill, minmax(min(25%, 200px), 1fr));
  /* 自动计算列数，最小宽度不小于200px或容器宽度的25%，保证画面不会过小 */
}

兼容性说明 #

• :has()伪类和容器查询（@container）目前已被Chrome、Firefox、Safari等主流现代浏览器支持
• 若需兼容旧版浏览器，可通过简化逻辑（比如固定多列布局）替代，但核心自适应效果仍可通过纯CSS实现

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