宽高比计算器
把尺寸简化为宽高比，求解缺失的宽度或高度，或把某个宽高比放入指定容器——同时提供对应的CSS代码。
宽高比计算器完全在你的浏览器中运行。尺寸数据在你的设备上处理，绝不会上传。
打开CSS clamp()计算器
关于 宽高比计算器
宽高比计算器能应对这个问题出现的所有三种方向。给它宽度和高度，它会用最大公约数把比例简化——更重要的是，它还能识别那些“接近但不完全相符”的情况：1366×768会被简化成没什么用的683:384，但计算器同时也会标注它“实际上就是16:9”——这正是你真正想要的答案。给它一个比例和一个已知尺寸，它就能求出另一个尺寸的整数像素值。给它一个比例和一个容器，它就能返回能放入其中的最大尺寸。无论哪种情况，你都能得到该比例下的标准尺寸（16:9从1280×720到3840×2160不等）以及可以直接复制使用的CSS代码：既有现代的aspect-ratio属性，也有经典响应式布局模式使用的padding-top百分比写法。
功能特性
- 尺寸 → 精确比例，以及最接近的常见比例
- 比例 + 一个尺寸 → 求出另一个尺寸的整数像素值
- 比例 + 容器 → 求出能放入其中的最大尺寸
- 提供从16:9到2.39:1变形宽银幕比例的多种预设
- 标准尺寸列表，确保高度始终为偶数
- 提供CSS的aspect-ratio属性以及padding-hack百分比写法
如何使用 宽高比计算器
- 选择方向：尺寸转比例、求缺失尺寸，或适配容器
- 输入你已知的数值
- 查看计算结果以及该比例下的标准尺寸
- 如果要用在布局中，可以直接复制CSS代码
示例
输入
16:9, width 1000
输出
Height 563 px · CSS: aspect-ratio: 16 / 9; · padding hack 56.25%
56.25%正好是9÷16——这是响应式视频布局中的经典数字。
常见错误与故障排除
- 1366×768被简化成683:384，而不是16:9。 — 683:384确实是精确的答案——这个分辨率本身就不是真正的16:9。“实际上是16:9”这一行给出的是实用意义上的答案；两者同时显示，是因为它们都是对的。
- 求解出的尺寸是奇数，视频编码器拒绝接受。 — H.264等编码格式都要求尺寸为偶数。请使用标准尺寸列表，其中的高度都已经调整为偶数；或者把输入值微调一个像素。
- 在16:9的播放器里播放4:3的视频出现了黑边。 — 这是正常现象——把4:3的内容放入16:9的画面中，必然会在两侧留出黑边。想要消除黑边，就意味着必须裁剪掉一部分内容。
常见问题
- 给定宽度时，16:9对应的分辨率是多少？
- 用宽度乘以9/16：1280→720，1920→1080，2560→1440，3840→2160。计算器可以针对任意宽度或高度求解。
- 如何在CSS中保持一个元素的宽高比？
- 现代做法只需要一行代码：aspect-ratio: 16 / 9。传统写法则是给容器设置56.25%的padding-top，并在其中把内容绝对定位。计算器会根据你的比例同时给出这两种写法。
- 为什么显示器宣传的是16:9，但实际像素数字看起来不太一样？
- 像1366×768这样的面板，与真正的16:9相差不到百分之一——这个精度对于宣传和全屏播放视频来说已经足够了。计算器会同时展示精确比例和最接近的常见比例名称。
- 社交媒体平台通常需要哪些宽高比？
- 信息流视频倾向于1:1或4:5，故事和短视频通常是9:16，横向上传的内容多为16:9，而电影级素材则常用21:9或2.39:1。结合预设比例和求缺失尺寸模式，可以得到精确的像素目标值。
相关工具
全部 ArrayKit 工具