研发工具 · 媒体容器

CSS 宽高比预览

用设计稿尺寸确定比例，检查视频或图片占位在指定宽度下需要留出多少高度。

1. 输入参考尺寸和容器宽度

参考宽度 px参考高度 px容器宽度 px

参考尺寸 1–10000 px，容器宽度 1–2400 px，均为整数。

比例 16 / 9。宽 640 px 时，理论高度 360 px。

示意框会按可用空间缩小，实际高度请以上方换算值为准。

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

代码用于空媒体容器。容器的高度需要保持自动，固定宽高、边框、内边距或内容约束都可能影响最终盒子尺寸。工具只换算尺寸，不读入或裁剪媒体文件。参数只在当前页面计算，无上传或自动保存。