Bootstrap自定义尺寸视频嵌入无法设置max-height问题求助

问题根源 #

你用padding-bottom:125%实现4:5比例时，这个百分比是相对于容器宽度计算的，容器高度完全由宽度决定，直接给容器加max-height无法覆盖这个逻辑，所以不会生效。

方法1：用CSS aspect-ratio替代padding-bottom（推荐，现代浏览器友好） #

原生CSS的aspect-ratio属性可以直接定义宽高比，且能配合max-height正常生效，比padding-bottom的方式更直观。

1. 替换自定义比例类的CSS：

.vidbox.embed-responsive-4by5 {
  aspect-ratio: 4/5; /* 直接设置4:5宽高比 */
  max-height: 90vh; /* 这里设置你需要的最大高度 */
  width: 100%;
}
.vidbox.embed-responsive-4by5 iframe {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，避免拉伸变形 */
}

2. 对应HTML结构：

<div class="carousel-item">
  <div class="vidbox embed-responsive embed-responsive-4by5">
    <iframe src="你的视频链接" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

容器会先遵循aspect-ratio保持4:5比例，当计算出的高度超过max-height时，会自动缩小宽度适配最大高度，同时维持比例。

方法2：嵌套容器限制高度（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，用双层容器嵌套来控制：

1. 添加外层容器的CSS：

.video-height-limiter {
  max-height: 90vh; /* 最大高度限制 */
  width: fit-content; /* 让容器宽度由内部比例容器反推 */
  margin: 0 auto; /* 居中显示，可选 */
  overflow: hidden;
}
.vidbox.embed-responsive-4by5 {
  position: relative;
  width: 100%;
  padding-bottom: 125%; /* 保留原4:5比例逻辑 */
}
.vidbox.embed-responsive-4by5 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2. 调整HTML结构：

<div class="carousel-item">
  <div class="video-height-limiter">
    <div class="vidbox embed-responsive embed-responsive-4by5">
      <iframe src="你的视频链接" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

原理是外层容器用max-height限制高度，width: fit-content让它的宽度由内部比例容器的高度反推（内部容器高度是宽度的125%），当高度达到最大值时，宽度会被自动限制，从而整体缩小并维持4:5比例。

额外注意 #

• 确保Carousel的.carousel-item容器没有设置固定高度，避免冲突；
• 如果是全屏轮播，需检查body/html的margin/padding是否影响容器尺寸。

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