宽高比（Aspect Ratio）是描述矩形宽度与高度比例关系的数值，写法为 宽:高。它不描述绝对尺寸，只描述形状。1920×1080 的全高清显示器和 1280×720 的 HD 视频，宽高比都是 16:9——形状相同，尺寸不同。
什么是宽高比？
以 1920×1080 为例，求宽高比的算法是：找到 1920 和 1080 的最大公约数（GCD），然后两者分别除以它。
GCD(1920, 1080) = 120
1920 ÷ 120 = 16
1080 ÷ 120 = 9所以宽高比是 16:9。
宽高比在以下场景无处不在：
- 短视频平台 — 抖音、快手的竖屏规范
- 直播与长视频 — B站、爱优腾的上传要求
- 社交媒体配图 — 微信朋友圈、微博图文
- 前端开发 — 响应式图片容器、视频嵌入
- UI 设计 — 启动页、Banner 尺寸规范
常见宽高比及国内使用场景
16:9 — 横屏通用标准
16:9 是当前横屏内容的主流比例，适用于绝大多数桌面端和电视场景。
国内场景：
- B站视频上传推荐分辨率：1920×1080（16:9）
- 爱奇艺、优酷、腾讯视频标准画质
- PC 端直播横幅
- 微博视频（横屏）
9:16 — 竖屏短视频
9:16 是手机竖屏的标准比例，随着短视频崛起成为移动端最重要的内容格式。
国内场景：
- 抖音、快手视频（推荐 1080×1920）
- 微信视频号竖屏内容
- 小红书短视频
- 微信朋友圈全屏广告
1:1 — 正方形
正方形格式在社交媒体配图和电商图片中极为常见。
国内场景：
- 微信朋友圈图片（9 宫格布局中每格为正方形）
- 淘宝/京东商品主图（推荐 800×800 或 1000×1000）
- 微信公众号封面图的正方形版本
- 头像、应用图标
4:3 — 传统横屏
4:3 比 16:9 更”方”，在传统 PPT、部分教学视频和老式监控设备上仍有使用。
国内场景：
- 部分企业培训课件（WPS/PowerPoint 旧版默认）
- 传统安防摄像头画面
- iPad 屏幕（接近 4:3）
3:4 — 竖版图片
竖版图片在移动端阅读中占优，电商和社交媒体都有专属规格。
国内场景：
- 小红书图文（推荐 3:4，即 1080×1440）
- 微信公众号竖版封面图
- 淘宝商品详情竖版大图
宽高比的计算方法
核心算法：用辗转相除法（欧几里得算法）求最大公约数，再做约分。
JavaScript 实现：
function gcd(a, b) {
return b === 0 ? a : gcd(b, a % b);
}
function aspectRatio(width, height) {
const d = gcd(width, height);
return `${width / d}:${height / d}`;
}
console.log(aspectRatio(1920, 1080)); // "16:9"
console.log(aspectRatio(1080, 1920)); // "9:16"
console.log(aspectRatio(1080, 1440)); // "3:4"
console.log(aspectRatio(800, 800)); // "1:1"Python 实现：
from math import gcd
def aspect_ratio(width: int, height: int) -> str:
d = gcd(width, height)
return f"{width // d}:{height // d}"
print(aspect_ratio(1920, 1080)) # 16:9
print(aspect_ratio(1080, 1920)) # 9:16
print(aspect_ratio(1080, 1440)) # 3:4等比缩放：如何在调整尺寸时保持比例
已知原始尺寸，求目标尺寸时保持宽高比的公式：
已知新宽度，求新高度：
新高度 = (新宽度 × 原始高度) ÷ 原始宽度已知新高度，求新宽度：
新宽度 = (新高度 × 原始宽度) ÷ 原始高度实例： 将 1920×1080 的视频缩小到宽度 800px
新高度 = (800 × 1080) ÷ 1920 = 450结果：800×450，仍然是 16:9。
在实际工作中，等比缩放的常见坑：
- 直接修改一个维度 — 忘记同步修改另一个，导致画面被拉伸或压缩
- 导出设置分辨率与源素材比例不符 — 最终产出带黑边或裁剪
- 设计稿标注了绝对像素 — 开发时直接写死，移动端适配出问题
CSS 中实现宽高比约束
现代方案：aspect-ratio 属性
/* 16:9 视频容器 */
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 正方形缩略图 */
.thumbnail {
width: 200px;
aspect-ratio: 1;
}
/* 小红书风格 3:4 卡片 */
.xhs-card {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}Chrome 88+、Firefox 89+、Safari 15+ 均已支持，新项目直接用这个。
兼容方案：padding-top 百分比技巧
/* 16:9：padding-top = (9 ÷ 16) × 100 = 56.25% */
.ratio-16-9 {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.ratio-16-9 > * {
position: absolute;
inset: 0;
}常用比例的 padding-top 值：
| 比例 | padding-top |
|---|---|
| 16:9 | 56.25% |
| 9:16 | 177.78% |
| 4:3 | 75% |
| 3:4 | 133.33% |
| 1:1 | 100% |
嵌入 B站/优酷视频
<div class="video-embed">
<iframe src="//player.bilibili.com/player.html?..." allowfullscreen></iframe>
</div>.video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}在线计算宽高比
不想手动算，直接用 ZeroTool 宽高比计算器。输入任意两个已知值——宽度、高度或目标尺寸——工具即时算出比例、缺失的维度以及各平台常见分辨率对照。完全在浏览器本地运行，不上传任何数据。