专业宽高比计算与可视化工具
输入分辨率自动计算宽高比，或根据目标比例和单边尺寸反算另一边。直观对比主流宽高比的形状差异。
智能比例识别
输入任意分辨率（如 2560×1440），自动化简为最简整数比（16:9），并识别该比例所属的标准分类——标准、宽屏、超宽屏、方屏等。
尺寸反算器
锁定宽高比后，输入宽度或高度中的任意一个，自动计算出另一边的精确像素值。裁剪图片、设计画布、视频导出时的必备工具。
可视化比例对比
在同一画面中叠加显示多种宽高比的矩形轮廓，直观感受 16:9、4:3、21:9、1:1 等比例的形状差异，告别抽象数字。
什么是宽高比？
理解屏幕、图片、视频中宽高比的含义与应用。
显示宽高比 (Display)
屏幕物理形状的比例，决定了显示器"看起来是什么形状"。16:9 是目前最主流的显示比例，几乎所有笔记本、显示器和电视都采用。21:9 和 32:9 则是超宽屏和超级超宽屏的标志。
像素宽高比 (Pixel)
分辨率的宽像素数与高像素数的比值。1920×1080 的像素宽高比为 16:9，但 1920×1200 则为 16:10。像素宽高比和显示宽高比通常一致，但老式 CRT 和某些专业设备可能不同。
内容宽高比 (Content)
图片、视频、设计稿本身的比例。电影常用 2.35:1（CinemaScope）或 1.85:1，社交媒体偏好 1:1（Instagram）、9:16（短视频）、4:5（Facebook 图片）。选对比例能最大化展示面积。
如何使用宽高比计算器
三种使用方式，满足不同场景。
分辨率→比例
输入分辨率（如 3440×1440），工具自动计算出宽高比（43:18 ≈ 21:9）并给出标准分类。适合查看显示器或图片的实际比例。
比例→尺寸
选择目标宽高比（如 16:9），输入宽度或高度，自动算出另一边像素值。适合裁剪图片、设置画布尺寸、视频导出。
可视化对比
在预览面板中叠加常见宽高比的矩形轮廓，直观感受不同比例的形状差异。点击常见比例快速切换对比。
常见宽高比详解
16:9 (1.78:1)
当今最通用的宽高比。Full HD (1920×1080)、QHD (2560×1440)、4K (3840×2160) 都是 16:9。YouTube、Netflix、电视广播的标准画面比例。
16:10 (1.6:1)
曾经的笔记本和显示器主流，如 1920×1200、2560×1600。比 16:9 多出约 11% 的垂直空间，非常适合文档编辑和编程。近年在高端笔记本中回归（MacBook、ThinkPad X1）。
21:9 (2.33:1)
超宽屏显示器的标准比例，典型分辨率 3440×1440 或 2560×1080。与电影画面比例接近，无黑边观影。多窗口并排办公效率极高。
4:3 (1.33:1)
经典的 CRT 时代比例，如 1024×768、1600×1200。目前主要在 iPad 和部分商务投影仪中使用。方形感较强，不适合宽屏内容。
各平台推荐宽高比
不同平台和用途对宽高比有不同的最佳实践。
社交媒体
推荐比例：
• Instagram/抖音 stories/短视频：9:16 (1080×1920)
• Twitter/X 图片：16:9 (1200×675)
• Facebook 封面：2.63:1 (1640×624)
视频制作
常用比例：
• 电影宽银幕：2.39:1 (CinemaScope)
• 竖屏短视频：9:16 (1080×1920)
• IMAX 画幅：1.43:1 或 1.9:1
设计与印刷
标准比例：
• 美国 Letter：1.294:1 (8.5×11)
• 名片：1.75:1 (3.5×2 英寸)
• PPT 幻灯片：16:9 或 4:3
显示设备
主流比例：
• 高端笔记本（MacBook/ThinkPad）：16:10 或 3:2
• 超宽带鱼屏：21:9 (3440×1440)
• 超级超宽屏：32:9 (5120×1440)，等于两块 16:9 并排
宽高比实用技巧
裁剪保留
将 16:9 视频裁剪为 9:16 竖屏时，会丢失约 68% 画面。建议拍摄时预留安全区域，或使用"中心裁剪+模糊背景"方案。
等比缩放
缩放图片时务必锁定宽高比，否则画面会变形拉伸。PS 按住 Shift 拖角、CSS 使用 object-fit: contain/cover 可确保比例正确。
响应式适配
CSS aspect-ratio 属性可以直接声明元素比例（如 aspect-ratio: 16/9），浏览器自动计算高度，是响应式布局的利器。
黑边处理
当内容比例与容器不匹配时会出现黑边（letterbox/pillarbox）。16:9 屏幕播放 21:9 电影会上下黑边，播放 4:3 内容会左右黑边。
常见问题解答
Q.16:9 和 1920×1080 是什么关系？
1920÷1080=1.778=16÷9。所以 1920×1080 的宽高比就是 16:9。同理 2560×1440、3840×2160 也都是 16:9——分辨率不同但比例一样。
Q.3440×1440 的比例到底是多少？
3440÷1440≈2.389，最接近 21:9 (2.333)。严格来说 3440:1440 化简是 43:18，但业界约定俗成称之为 21:9 超宽屏。
Q.为什么有些分辨率的比例看起来很奇怪？
比如 1366×768 化简后是 683:384，无法整除为简洁比例。这是因为面板制造时选择了方便的像素数，而不是严格遵循 16:9。实际观感上它非常接近 16:9。
Q.aspect-ratio CSS 属性的兼容性如何？
所有现代浏览器（Chrome 88+、Firefox 89+、Safari 15+）都已支持。配合 width 或 height 使用，浏览器会自动计算另一边，非常适合响应式容器。
Q.视频的 DAR 和 SAR 是什么？
DAR (Display Aspect Ratio) 是最终显示比例，SAR (Sample Aspect Ratio) 是像素采样比例。当 SAR≠1:1 时（如某些 DV 格式），即使分辨率显示为 720×480，实际画面可能是 16:9。
Q.3:2 比例有什么优势？
3:2 (1.5:1) 比 16:9 多约 18% 垂直空间，比 4:3 更现代。Surface 系列和新款 Chromebook 采用此比例，非常适合平板模式下的阅读和手写。
宽高比选择小贴士
- • 视频博主： 横屏选 16:9，竖屏选 9:16。导出前确认目标平台推荐分辨率以避免二次压缩。
- • 设计师： 设计稿导出多尺寸时，优先设计 1:1 版本，再向两侧扩展为 16:9 和 9:16。
- • 购买显示器： 办公码字选 16:10 或 3:2，影视游戏选 16:9 或 21:9。不确定就选 16:9 最通用。
- • 前端开发： 用 CSS aspect-ratio + object-fit 组合，可以优雅处理任意比例的图片容器。