宽高比计算器：视觉设计的黄金准则
在数字内容创作中， 宽高比 (Aspect Ratio) 是决定画面构图和用户体验的核心参数。无论您是为 Bilibili 制作视频、为公众号设计封面，还是在开发响应式网页，理解并精确计算宽高比都至关重要。本工具为您提供了一站式的比例换算与分辨率缩放解决方案。
1. 什么是宽高比？
宽高比是图像或屏幕宽度与高度的比例关系。它通常表示为两个由冒号分隔的数字（如 16:9）。这个比例并不代表实际像素大小，而是代表了形状的“胖瘦”：
- 16:9： 现代宽屏标准，广泛用于高清电视、网络视频和大多数显示器。
- 9:16： 移动端竖屏视频标准，如抖音、快手和视频号。
- 4:3： 传统电视和早期计算机显示器标准，也常用于摄影（如 M43 系统）。
- 21:9： 电影感超宽屏，为用户提供极佳的沉浸式体验。
2. 解决的具体问题
本计算器专为以下应用场景深度优化：
- 分辨率缩放： 如果您有一张 16:9 的图片，想要将其宽度调整为 1200 像素，高度应该是多少？切换到“缩放分辨率”模式即可秒出结果。
- 设计稿适配： UI 设计师经常需要计算非标准尺寸的比例，以确保在不同屏幕上的完美呈现。
- 社交媒体发布： 不同的平台有不同的最佳推荐尺寸。我们内置了主流平台的尺寸预设，点击即用。
- 视觉预览： 枯燥的数字难以直观感受，我们的动态预览框能让您瞬间看到比例的视觉效果。
3. 计算逻辑：最大公约数 (GCD)
为了将任意分辨率转换为最简比例，我们使用了欧几里得算法来计算宽高的最大公约数。例如：
- 输入宽度 1920，高度 1080。
- 计算 GCD(1920, 1080) = 120。
- 1920 / 120 = 16，1080 / 120 = 9。
- 得出最终比例 16:9。
4. 关于隐私与安全
本工具完全基于 JavaScript 在您的本地浏览器运行。您输入的任何尺寸、分辨率或设计参数 绝不会上传到服务器 。您可以放心在任何敏感项目中使用，无需担心隐私泄露。
5. 实用技巧
在进行网页布局时，可以使用 CSS 的
aspect-ratio
属性来锁定元素的比例，例如
aspect-ratio: 16 / 9;
。这能有效防止页面加载时出现的布局偏移 (CLS)，提升网站性能评分。