研发工具

给视频封面预留 16:9 占位，640 像素宽时留多高

极捷工具编辑 · 更新于

用设计稿的宽高求出最简比例，分别核对桌面与手机宽度的理论高度，再把比例写入空媒体容器。

打开CSS 宽高比预览 →

操作步骤

  1. 打开 CSS 宽高比预览，点击恢复示例。参考宽度填 1920，参考高度填 1080，容器宽度填 640。
  2. 查看比例 16 / 9 和理论高度 360 px。把容器宽度改为 320，比例应保持 16 / 9，理论高度应变成 180 px。
  3. 点击复制 CSS 或下载 CSS。把样式放进页面，并给空占位元素添加 media-frame 类。确认父容器决定宽度，且其他规则没有固定该元素的高度。
  4. 把参考高度暂时改成 0。页面应报错并隐藏代码和下载入口。恢复 1080 后重新核对，再把 CSS 用到页面中。

跟着示例试一次

视频封面设计稿为 1920×1080。两边同除以 120 得到 16:9。在 640 px 和 320 px 容器中，计算高度分别是 640×9÷16＝360 px 和 320×9÷16＝180 px。

.media-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

怎样确认结果正确

导出的代码应含 aspect-ratio: 16 / 9 与 height: auto。分别把父容器设为 640 px 和 320 px，在开发者工具中查看空占位盒的实际高度。页面里的彩色示意框会缩放，只用于检查形状。

常见问题与边界

参考宽高只接受 1–10000 的整数，容器宽度为 1–2400 的整数。两个方向都固定时，比例无法决定高度。边框、内边距、长内容和其他尺寸规则可能改变实际盒子。这个流程只预留空间，不读取视频或修改图片像素。输入在当前页面计算，无上传或自动保存。

用CSS 宽高比预览动手试试 →查看全部教程