在前端开发中，经常需要实现视频比例自适应的效果，使得视频在不同的设备上展示效果一致，同时保证视频的比例不被拉伸或压缩。本文将介绍三种使用 Flexbox 实现视频比例自适应的方法，以及它们的优缺点和适用场景。
方法一：使用 padding-bottom
这种方法使用了 padding-bottom 属性来实现视频比例自适应。具体实现步骤如下：
- 设置一个包含视频的容器元素，例如 div。
- 给容器元素设置 position: relative 属性。
- 设置视频元素的 position: absolute 属性，使其相对于容器元素进行定位。
- 设置视频元素的 top、left、right、bottom 属性为 0，使其充满容器元素。
- 给容器元素设置 padding-bottom 属性，值为视频的高度除以宽度的百分比，例如 56.25%（16:9 的比例）。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------------ ------ ------------------------ ------ ------- ---------------- - --------- --------- --------------- ------- - ---------------- ----- - --------- --------- ---- -- ----- -- ------ -- ------- -- ------ ----- ------- ----- - --------
优点：实现简单，兼容性好。
缺点：需要手动计算 padding-bottom 的值，不能动态适应视频的比例变化。
适用场景：适用于视频比例固定的情况，例如 16:9 的比例。
方法二：使用 aspect-ratio
这种方法使用了 CSS3 新增的 aspect-ratio 属性来实现视频比例自适应。具体实现步骤如下：
- 设置一个包含视频的容器元素，例如 div。
- 给容器元素设置 display: flex 和 aspect-ratio 属性，值为视频的宽高比，例如 16/9。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------------ ------ ------------------------ ------ ------- ---------------- - -------- ----- ------------- ----- - ---------------- ----- - ------ ----- ------- ----- - --------
优点：实现简单，不需要手动计算比例值，可以动态适应视频的比例变化。
缺点：兼容性较差，部分浏览器不支持 aspect-ratio 属性。
适用场景：适用于视频比例固定且不需要考虑兼容性的情况。
方法三：使用 JavaScript 计算
这种方法使用了 JavaScript 计算视频的比例值，并设置容器元素的高度来实现视频比例自适应。具体实现步骤如下：
- 设置一个包含视频的容器元素，例如 div。
- 给容器元素设置 position: relative 属性。
- 在 JavaScript 中获取视频元素的宽度和高度，计算出视频的宽高比。
- 设置容器元素的高度为视频的宽度除以宽高比。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------------ ------ --------------- ------------------- ------ -------- ----- ----- - --------------------------------- ----- --------- - ------------------------------------------- ----- ----------- - ---------------- - ------------------ ---------------------- - ------------------------ - ---------------- --------- ------- ---------------- - --------- --------- - ---------------- ----- - ------ ----- ------- ----- ----------- ------ - --------
优点：可以动态适应视频的比例变化，兼容性较好。
缺点：实现较复杂，需要使用 JavaScript 计算比例值。
适用场景：适用于视频比例不固定的情况，例如用户上传的视频。
总结
以上三种方法均可以使用 Flexbox 实现视频比例自适应，具体使用哪种方法需要根据实际情况而定。如果视频比例固定且不需要考虑兼容性，可以使用较为简单的 padding-bottom 或 aspect-ratio 方法；如果视频比例不固定或需要考虑兼容性，可以使用 JavaScript 计算的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650f943c95b1f8cacd848334