如何让容器跟随子元素video的原始宽高比自适应调整？

要实现容器尺寸随Video调整而变化，同时保持视频原始宽高比，只需对现有代码做以下修改：

• 给容器设置width: fit-content，让容器宽度贴合视频的实际宽度，避免默认的拉伸行为
• 移除video的display: inline，video默认是inline-block元素，这个设置会干扰尺寸计算
• 保持video的height: [你需要的高度]和width: auto，浏览器会自动根据视频原始比例计算对应的宽度
• 可选添加object-fit: contain，确保视频内容在设定尺寸内完整显示且不发生拉伸

修改后的代码如下：

.container {
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: fit-content; /* 关键修改：让容器宽度贴合内容 */
}

.child {
  height: 260px;
  width: auto; /* 保持自动计算宽度，维持比例 */
  object-fit: contain; /* 可选：确保视频内容完整显示 */
}

<div class="container">
  <video src="https://www.w3schools.com/tags/mov_bbb.mp4" class="child" controls></video>
</div>

说明：当你调整.child的height值时，video会自动按原始比例计算宽度，容器也会因为width: fit-content而自动适配video的宽度，整体尺寸就像单个元素一样跟随变化。

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