如何在HTML中垂直排列经transform缩放的4个视频避免重叠？

我之前也踩过transform: scale()的坑！问题根源其实很明确：transform: scale()只是视觉层面的缩放，不会改变元素在文档流中的实际占位尺寸。举个例子：如果你的原视频是300×533（iPhone竖屏小尺寸），用transform: scale(2)放大到600×1066，但浏览器布局时仍会认为这个视频只占300×533的空间，后面的视频自然会往上挤导致重叠。

下面给你两种实践过的靠谱解决方案，按需选择：

方案一：容器包裹+transform缩放（精准控制比例） #

适合需要固定缩放倍数的场景，核心是用容器提前占住缩放后的布局空间：

1. 给每个视频套一个容器div，根据原视频尺寸和缩放比例计算容器的宽高
2. 对视频应用transform: scale()，同时设置transform-origin: top left，确保视频从左上角开始缩放填满容器
3. 给容器加间距避免视频紧贴

代码示例：

<style>
  .video-wrapper {
    /* 原视频300×533，缩放2倍后，容器设为600×1066 */
    width: 600px;
    height: 1066px;
    margin-bottom: 20px; /* 视频间的留白 */
    overflow: hidden; /* 防止缩放溢出 */
  }
  .video-wrapper video {
    transform: scale(2);
    transform-origin: top left;
    /* 保持原视频的原始尺寸 */
    width: 300px;
    height: 533px;
  }
</style>

<div class="video-wrapper">
  <video src="iphone-video-1.mp4" controls></video>
</div>
<div class="video-wrapper">
  <video src="iphone-video-2.mp4" controls></video>
</div>
<div class="video-wrapper">
  <video src="iphone-video-3.mp4" controls></video>
</div>
<div class="video-wrapper">
  <video src="iphone-video-4.mp4" controls></video>
</div>

方案二：直接设置视频宽高（简单高效，推荐） #

如果不需要精准的缩放倍数，只是想放大视频并保持比例，直接设置video的宽/高属性即可，浏览器会自动计算另一个维度，布局流会直接识别设置后的尺寸，完全不会重叠：

代码示例：

<style>
  .vertical-video {
    width: 600px; /* 你想要的放大后宽度 */
    height: auto; /* 自动保持原视频宽高比 */
    display: block; /* 消除行内元素默认间隙 */
    margin-bottom: 20px; /* 视频间留白 */
  }
</style>

<video class="vertical-video" src="iphone-video-1.mp4" controls></video>
<video class="vertical-video" src="iphone-video-2.mp4" controls></video>
<video class="vertical-video" src="iphone-video-3.mp4" controls></video>
<video class="vertical-video" src="iphone-video-4.mp4" controls></video>

额外：Table布局的实现（如果一定要用） #

如果坚持用table布局，原理和div一致，要么给td设置缩放后的尺寸，要么直接设置视频宽高：

<style>
  video {
    width: 600px;
    height: auto;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    padding: 10px 0; /* 视频间的留白 */
  }
</style>

<table>
  <tr><td><video src="iphone-video-1.mp4" controls></video></td></tr>
  <tr><td><video src="iphone-video-2.mp4" controls></video></td></tr>
  <tr><td><video src="iphone-video-3.mp4" controls></video></td></tr>
  <tr><td><video src="iphone-video-4.mp4" controls></video></td></tr>
</table>

总结一下：优先选方案二，简单直接无布局隐患；如果必须用transform缩放，一定要用容器提前占住布局空间，不然重叠问题肯定会出现。

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