CSS 与前端开发工具

Aspect Ratio Calculator

计算图像与容器的宽高比,也可根据比例推算缺少的宽度或高度。

输入参数

浏览器本地处理

实时预览

参数修改后自动更新
可直接选择或复制

将宽高约分为最简比例,或按比例与一个尺寸计算另一边。

输入内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

Aspect Ratio Calculator 提供“计算比例”和“计算另一尺寸”两种模式。前者把宽高约成最简比例,后者在保持比例时求出缺少的一边,并显示可读的小数结果。

如何使用

  1. 选择“计算比例”或“计算另一尺寸”模式。
  2. 计算比例时输入宽度和高度,两者必须是正安全整数。
  3. 反向计算时提供正整数比例和已知的宽度或高度,已知尺寸允许正小数。
  4. 查看比例、尺寸结果与预览,再复制结果。

使用示例

  • 1920:1080 的 GCD 为 120,约分得到 16:9,小数比例约 1.7778。
  • 1024:768 → 4:3;1080:1920 → 9:16。
  • 比例 16:9、已知宽度 1920 → 高度 1080。

计算原理

整数宽高通过欧几里得算法计算最大公约数 GCD,再将两边同时除以 GCD。正向约分只接受正安全整数尺寸,避免小数与超大整数导致精度歧义。按 W:H 比例推算时,高度 = 宽度 × H / W,宽度 = 高度 × W / H;已知尺寸允许正小数,输出最多保留 6 位小数。输入与输出采用相同尺寸单位。

常见用途

  • 确认图片、视频和画布的宽高比。
  • 按固定比例缩放素材。
  • 设置 CSS aspect-ratio 前核对尺寸。

隐私说明

所有输入、计算、CSS 生成和预览都在当前浏览器中完成,不会上传用户内容,不使用后台、数据库、在线 API 或第三方 CDN,也不会自动保存您的输入。

FAQ

1920×1080 是什么比例?

是 16:9。1920 与 1080 的最大公约数为 120,两边同时除以 120 即可。

1080×1920 为什么是 9:16?

宽高比按宽:高排列,交换宽和高后比例也会交换,表示竖向画面。

如何根据 16:9 算高度?

使用高度 = 宽度 × 9 / 16,例如宽 1920 时高为 1080。

尺寸可以为 0 或小数吗?

零和负数无效。计算最简比例需要正安全整数宽高;反向计算的已知尺寸允许正小数,比例两边仍需正整数。

返回开发者工具分类首页