如何让Div维持16/9宽高比且不溢出容器？动态适配宽高需求

我来帮你搞定这个需求——你想要让Div始终保持16:9的宽高比，同时在容器尺寸变化时（不管容器是更宽还是更高），都能像图片的object-fit那样适配：要么完整显示不裁剪，要么填满容器只裁掉超出部分，而且不能溢出容器，也不能拉伸变形。

先说说你之前代码的问题：你用padding-top: 56.25%的方式确实能让容器维持16:9比例，但里面的.video直接设了width:100%;height:100%，这会让它直接填满容器，一旦容器的宽高比不是16:9，这个Div就会被拉伸变形，完全达不到object-fit的效果。

下面给你两种常用的解决方案，分别对应object-fit: contain和object-fit: cover的效果，你可以根据需求选：

方案1：模拟object-fit: contain（完整显示，不裁剪） #

这种效果下，Div会保持16:9比例完整显示在容器内：如果容器比16:9宽，Div上下居中，左右留空；如果容器比16:9高，Div左右居中，上下留空。

HTML结构 #

<div class="container">
  <div class="ratio-wrapper">
    <div class="content-div">我是16:9的内容Div</div>
  </div>
</div>

CSS代码 #

/* 容器：可以设置任意宽高，支持响应式 */
.container {
  width: 100%; /* 比如改成500px或者80vw都可以 */
  height: 400px; /* 也可以是60vh这类响应式高度 */
  border: 2px solid #ccc;
  overflow: hidden; /* 防止极端情况溢出 */
  position: relative;
}

/* 比例控制层：核心是维持16:9比例并居中 */
.ratio-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 现代浏览器直接用这个属性，简洁高效 */
}

/* 如果要兼容不支持aspect-ratio的旧浏览器，把上面的.ratio-wrapper换成这段 */
/* .ratio-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16/9的倒数，56.25% */
/* } */

/* 你的内容Div */
.content-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

方案2：模拟object-fit: cover（填满容器，裁剪超出） #

这种效果下，Div会保持16:9比例填满整个容器，超出容器的部分会被自动裁剪，和图片的cover效果完全一致。

HTML结构和上面一样，只需要修改.ratio-wrapper的CSS：

.container {
  width: 100%;
  height: 400px;
  border: 2px solid #ccc;
  overflow: hidden;
  position: relative;
}

.ratio-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16/9; /* 维持16:9比例 */
}

/* 旧浏览器兼容版 */
/* .ratio-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  height: 0;
  padding-top: 56.25%;
  width: auto;
} */

.content-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

适配响应式容器 #

如果你的容器是响应式的（比如宽度随窗口变化，高度自适应），上面的代码完全适用，只需要把容器的width和height改成响应式的值，比如width: 80vw; height: 60vh;或者用百分比，效果会自动适配。

核心思路总结 #

• 用aspect-ratio（现代浏览器）或padding-top:56.25%（旧浏览器）来牢牢锁住16:9的比例。
• 通过绝对定位+transform: translate(-50%, -50%)让Div在容器里完美居中。
• 调整min-width/max-width这类属性，实现“完整显示”或“填满裁剪”的不同效果。
• 容器设置overflow:hidden，控制超出部分的显示。

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