什么是 宽高比？
宽高比是图像、视频或显示器的宽度和高度之间的比例关系，通常用冒号分隔的两个数字表示（例如 16:9、4:3）。
快速了解
| 创建时间 | 早期电影时代（1890 年代） |
|---|---|
| 规范文档 | 官方规范 |
工作原理
宽高比通过比较宽度和高度来描述矩形媒体的形状。常见的宽高比包括 16:9（宽屏，高清视频和显示器的标准）、4:3（传统电视和旧显示器）、1:1（正方形，在社交媒体上流行）、3:2（经典摄影）和 21:9（超宽影院）。调整图像或视频大小时，保持宽高比可以防止失真——拉伸图像会改变其宽高比并产生视觉瑕疵。在 CSS 中，aspect-ratio 属性允许元素在响应式布局期间保持比例。当在不同比例的屏幕上显示时，视频平台通常会对内容进行信箱化或柱箱化以保持原始宽高比。理解宽高比对于摄影师、摄像师、Web 开发人员和平面设计师为各种平台和显示器创建正确尺寸的内容至关重要。
主要特点
- 以宽度:高度比例表示（例如 16:9）
- 必须保持以防止图像失真
- 不同比例适用于不同用途
- 可通过宽度除以高度计算
- 影响内容在不同设备上的显示
- 对响应式网页设计很重要
常见用途
- 视频制作和编辑
- 摄影和图像裁剪
- 使用 CSS aspect-ratio 的响应式网页设计
- 社交媒体图像优化
- 显示器和屏幕规格
示例
Loading code...常见问题
视频最常见的宽高比是多少，为什么？
16:9 是目前视频和显示器最常见的宽高比。它成为高清电视的标准，因为它在宽屏电影格式和旧的 4:3 格式之间提供了良好的平衡。大多数电脑显示器、电视、智能手机（横向）和 YouTube 等视频平台都使用 16:9。
如何从像素尺寸计算宽高比？
将宽度和高度都除以它们的最大公约数（GCD）。例如，1920x1080 像素：1920 和 1080 的最大公约数是 120，所以 1920÷120 = 16，1080÷120 = 9，得到 16:9。或者，用宽度除以高度：1920÷1080 = 1.78，这是 16:9 的十进制等价值。
当视频宽高比与屏幕不匹配时会发生什么？
当宽高比不匹配时，内容通常会以信箱模式显示（较宽内容在较窄屏幕上显示时顶部和底部有黑边），或以柱箱模式显示（较窄内容在较宽屏幕上显示时左右有黑边）。或者，内容可以被裁剪或拉伸，但这会使图像失真。
社交媒体内容应该使用什么宽高比？
不同平台偏好不同的比例：Instagram 信息流帖子最适合 1:1（正方形）或 4:5（竖版），Instagram Stories 和 TikTok 使用 9:16（竖版），YouTube 视频是 16:9（横版），Twitter 和 Facebook 支持各种比例，但 16:9 和 1:1 最常见。
CSS 的 aspect-ratio 属性如何工作？
CSS 的 aspect-ratio 属性自动维护元素的比例。设置方式为 aspect-ratio: 宽度 / 高度（例如 aspect-ratio: 16 / 9）。当与宽度值结合使用时，高度会自动计算，反之亦然。这对于需要在不同屏幕尺寸上保持比例的响应式设计特别有用。