实现宽高双维度响应式且保持宽高比的Div

没问题！咱们不用改动.lightbox-wrap的fixed定位，就能让播放器同时实现宽高的响应式适配。核心是让播放器容器保持固定宽高比，同时限制它的最大高度不超出视口范围，下面给你两种实用方案：

方案一：用CSS aspect-ratio（现代浏览器首选） #

这个属性是CSS原生支持的宽高比控制，代码简洁易懂，适合现代浏览器环境：

.lightbox-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可添加背景色增强视觉效果 */
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox {
  position: relative;
  width: 90%;
  max-width: 1200px;
  /* 设置你需要的宽高比，比如常见的16:9 */
  aspect-ratio: 16/9;
  /* 限制最大高度不超过视口的90%，避免超出屏幕 */
  max-height: 90vh;
}

/* 让播放器占满容器 */
.lightbox .player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 示例播放器背景样式 */
  background: #222;
}

原理说明： #

• aspect-ratio:16/9 强制容器保持16:9的宽高比，调整窗口宽度/高度时，容器会自动按比例缩放
• max-height:90vh 确保容器高度不会超过视口的90%，避免窗口变窄时播放器过高超出屏幕
• 给.lightbox-wrap加上flex布局，能让播放器容器自动居中，提升交互体验

方案二：用padding-top百分比（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding百分比的技巧（百分比padding基于容器宽度计算）：

.lightbox-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox {
  position: relative;
  width: 90%;
  /* 16:9的宽高比，对应padding-top = 9/16 = 56.25% */
  padding-top: 56.25%;
  /* 同时限制最大宽度和基于视口高度的最大宽度，避免高度溢出 */
  max-width: min(1200px, calc(90vh / 0.5625));
}

.lightbox .player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
}

原理说明： #

• padding-top:56.25% 相当于用padding撑开容器的高度，实现16:9的比例
• max-width: min(1200px, calc(90vh / 0.5625)) 同时限制容器的最大宽度，确保它的高度不会超过视口的90%

这两种方案都不需要修改.lightbox-wrap的fixed定位，播放器会在全屏容器内自适应宽高，滚动条的问题也会自然解决——因为播放器高度永远不会超出视口范围。

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