如何保持图片16:9宽高比并适配90vh容器且不出现滚动条

可行，用CSS的flex布局结合aspect-ratio属性就能实现，既保证图片的16:9宽高比，又能让图片始终在90vh容器的剩余空间内，不会触发滚动条。

实现思路 #

1. 容器设置固定90vh高度，用flex垂直布局分配标题和图片的空间
2. 图片容器通过aspect-ratio: 16/9强制保持宽高比，同时利用flex特性占据容器剩余空间
3. 用object-fit控制图片在容器内的显示方式，避免变形

完整代码示例 #

HTML结构

<div class="container">
  <h2 class="title">你的标题文本</h2>
  <div class="image-container">
    <img src="你的图片地址" alt="图片描述">
  </div>
</div>

CSS样式

.container {
  height: 90vh;
  overflow: hidden; /* 禁止滚动条 */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 标题与图片的间距，可自定义 */
  padding: 1rem; /* 可选内边距，避免内容贴边 */
}

.title {
  margin: 0;
  /* 根据需求自定义标题样式，比如字体大小、颜色等 */
}

.image-container {
  flex: 1; /* 自动占据容器剩余的全部空间 */
  aspect-ratio: 16/9; /* 强制16:9宽高比 */
  width: 100%;
  max-width: 100%;
  position: relative;
  margin: 0 auto; /* 图片容器水平居中（可选） */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片完整显示，不拉伸变形 */
  /* 如果需要图片覆盖容器且裁剪多余部分，可替换为 object-fit: cover */
}

兼容旧浏览器方案 #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top的方式模拟16:9比例：

.image-container {
  flex: 1;
  width: 100%;
  max-height: calc(90vh - 60px - 3rem - 2rem); /* 手动计算剩余高度：容器高度 - 标题高度 - 间距 - 内边距 */
  position: relative;
}

.image-container::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 9/16 = 0.5625，即56.25%，实现16:9比例 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

效果说明 #

• 容器固定90vh高度，overflow:hidden确保不会出现滚动条
• 标题占据自身高度，图片容器自动填充剩余空间
• 图片始终保持16:9比例，通过object-fit保证显示效果符合预期

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung