宽高比计算器(缩放时保持比例)

设定目标比例和一个尺寸, 另一个自动计算。反向同样可用。视频、图片裁剪、响应式 web 布局都适用。

比例 W比例 H宽高

工作原理

宽高比描述宽相对高: 16:9 表示每 9 单位高对应 16 单位宽。同一比例任何尺寸适用 — 1920×1080 与 800×450 都是 16:9。缩放时保持宽高比可避免拉伸或挤压, 也是响应式设计的基础。

比例可输入整数 (16:9) 或小数 (1.78:1), 宽高任意尺寸。编辑任一字段, 其他自动更新以维持比例。小数比 (宽/高) 用于 CSS calc() 或视频编辑工具。

16:9 — 现代 HDTV、电脑显示器、YouTube、2009 年后大多数电影。今天几乎所有场合的默认。

9:16 — Instagram Stories、TikTok、YouTube Shorts 的竖屏视频。手机优先内容的 16:9 翻转。

1:1 — 正方形。Instagram 信息流 2021 年前默认。专辑封面、头像。

4:3 — HD 之前的旧 TV 与显示器。仍用于一些经典风格内容。

3:2 — 单反相机默认。35mm 胶片。大尺寸打印。

21:9 — 超宽影院。变形宽银幕电影。部分 PC 显示器与 LG TV。

现代 CSS 有 aspect-ratio: 16/9; — 设比例让浏览器从宽计算高 (反之亦然)。避免旧的 padding-bottom 黑魔法, 是响应式嵌入与图片占位避免布局抖动 (CLS) 的关键。

Cumulative Layout Shift (CLS) 是 Core Web Vitals 之一。嵌入视频、未指定尺寸的图片、广告都可能导致 CLS — 设置明确 width/height (浏览器据此算宽高比) 或用 CSS aspect-ratio 修复。

›16:9 与 1.78:1 区别?

比例相同, 写法不同。16/9 = 1.778。冒号形式在电视/web 通用; 小数形式在电影通用。

›CSS 里如何保持宽高比?

用 aspect-ratio 属性: img { aspect-ratio: 16/9; width: 100%; height: auto; }。图片填充容器宽, 高自动维持比例。

›为什么我的视频在 4:3 电视上看起来不对?

现代视频大多 16:9。在 4:3 显示上要么加黑边、加上下黑条、要么拉伸。电视设置控制使用哪种。

›可以用非整数比例?

可以 — 输入 1.5 或 2.39。计算器视为小数; 化简后的比例输出仅在整数比例时显示。

›「像素宽高比」是什么?

另一概念: 单个像素的形状。现代显示用方形像素 (1:1)。一些旧 SD 视频格式用非方形像素 (NTSC 宽屏 1.0667 等)。本工具处理显示宽高比, 不是像素宽高比。

›「电影感」是什么?

21:9 (更准确 2.39:1 或 2.40:1) — 比 HDTV 更宽。常见于现代大片。流媒体常以此比例呈现电影。

›为什么 Instagram Reel/TikTok 用 9:16?

因为手机通常竖握。9:16 用内容填满整个手机屏幕; 16:9 在竖手机上会留上下空白。

›数据会上传吗?

不会。计算在本地。