如何调整div高度使其适配屏幕并保持16:9宽高比

当前代码出现垂直滚动的核心原因是：presentation-place通过绝对定位+padding-bottom实现宽高比时，未限制自身最大高度不超过视口高度。当窗口宽高比大于16:9（即窗口偏宽）时，按宽度100%计算出的高度会超出视口，从而触发滚动条。

以下是两种可行的解决方法：

方法一：使用现代CSS aspect-ratio属性（推荐） #

aspect-ratio是CSS原生支持的宽高比属性，代码简洁易维护：

body {
  background: black;
  user-select: none;
  margin: 0;
  /* 让body作为flex容器，实现内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden; /* 隐藏溢出内容，避免滚动条 */
}

.container {
  box-sizing: border-box;
  resize: both;
  overflow: auto;
  max-width: 100%;
  max-height: 100vh;
}

.presentation-place {
  user-select: none;
  background: white;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16/9; /* 直接指定16:9宽高比 */
  position: relative; /* 让子元素slide的绝对定位基于此容器 */
}

.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <div class="container">
    <div class="presentation-place">
      <div class="slide">
        <h1>Test slide</h1>
      </div>
    </div>
  </div>
</body>

方法二：兼容旧浏览器的vmin单位方案 #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用vmin控制尺寸：

body {
  background: black;
  user-select: none;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.container {
  box-sizing: border-box;
  resize: both;
  overflow: auto;
  max-width: 100%;
  max-height: 100vh;
}

.presentation-place {
  user-select: none;
  background: white;
  width: 100vmin;
  height: 56.25vmin; /* 100 * 9/16 = 56.25，实现16:9比例 */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

核心修改说明 #

• 将body设置为flex容器，让幻灯片在视口中水平垂直居中
• 给body添加overflow: hidden，彻底避免溢出产生滚动条
• 替换原绝对定位+padding-bottom的方案，用aspect-ratio或vmin保证元素尺寸始终在视口范围内
• 给presentation-place设置position: relative，确保子元素slide的绝对定位正确生效

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