带固定边界的父容器自适应适配任意尺寸视频的技术问询

问题场景 #

需要实现：父容器始终包裹视频，无黑边（letterboxing），视频不溢出且宽高比保持不变。尝试多种方法后，仅能单独适配横版或竖版视频，无法同时兼容两种情况。

示例代码：

<div class="parent" style="max-height: 150px; max-width: 100px;" >
  <!-- 横版视频示例 -->
  <video class="video" width="400" height="200"></video>
</div>

<div class="parent" style="max-height: 150px; max-width: 100px;">
  <!-- 竖版视频示例 -->
  <video width="200" height="400"></video>
</div>

期望效果：任意尺寸视频均可适配父容器，不溢出、不拉伸，父容器自适应包裹视频（无多余空白）。

解决方案 #

通过CSS让父容器自适应包裹视频，同时限制视频的最大尺寸并保持比例：

.parent {
  max-width: 100px;
  max-height: 150px;
  display: inline-block;
  /* 可选：添加背景色便于观察容器范围 */
  background-color: #f0f0f0;
}

.video {
  max-width: 100%;
  max-height: 100%;
}

原理说明 #

• 父容器设置display: inline-block，使其自动收缩以贴合内部视频的实际尺寸，同时通过max-width和max-height设定尺寸上限。
• 视频元素设置max-width: 100%和max-height: 100%，会根据自身原始宽高比自动缩放，确保不会超出父容器的尺寸限制，同时完全填充父容器（无黑边）。
• 该方案同时兼容横版、竖版及任意宽高比的视频，满足所有需求。

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