如何让HTML视频容器始终匹配视频实际尺寸？

在Flex横向画廊实现中，图片适配效果正常，但当浏览器窗口（或画廊容器）比例变化时，HTML视频的容器会比实际视频尺寸大，视频周围出现多余空白区域。

原实现代码 #

CSS #

.gallery {
  display: flex;
  overflow-x: auto;
  resize: both;
  background-color: rgb(200, 200, 200);
  padding: 10px;
  height: 200px;
}

.item {
  display: flex;
  flex: 0 0 auto;
  max-width: 100%;
}

.item img,
.item video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  min-width: 0;
}

.description {
  margin-right: 30px;
  margin-left: 5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}

HTML #

<div class="gallery">
  <div class="item">
    <video controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
    <div class="description">Video</div>
  </div>
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wald018.jpg/256px-Wald018.jpg">
    <div class="description">One</div>
  </div>
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg/256px-Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg">
    <div class="description">Two</div>
  </div>
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Swedish_Spruce_Forest.jpg/297px-Swedish_Spruce_Forest.jpg">
    <div class="description">Three</div>
  </div>
</div>

解决方案 #

问题根源在于video元素的固有宽高比在Flex布局中未被正确约束，导致容器.item的宽度未随视频实际渲染尺寸同步调整。只需对CSS做两处修改：

1. 给.item添加align-items: flex-start，避免视频被强制拉伸至容器高度：

.item {
  display: flex;
  flex: 0 0 auto;
  max-width: 100%;
  align-items: flex-start; /* 新增 */
}

2. 给video元素设置width: auto，让视频宽度根据实际高度自动匹配宽高比：

.item video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  min-width: 0;
  width: auto; /* 新增 */
}

修改后，视频容器会始终跟随视频的实际渲染尺寸变化，不会出现多余空白。

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