长宽比计算完全指南：视频 / 海报 / 网页设计常用比例

长宽比分为三大类：标准比例（来自工业标准）、电影比例（源自放映技术）、移动比例（针对手机屏幕）。标准比例包括 4:3（旧电视、胶片摄影）、16:9（HDTV、现代电视）、3:2（35mm 单反全画幅、35mm 胶卷标准）。电影比例有 2.39:1 或 21:9（宽银幕电影、IMAX）、1.85:1（美国电影业标准）、1.37:1（学院比例，Orson Welles 时代）。移动与社交比例则包括 9:16（TikTok、YouTube Shorts、Instagram Reels）、1:1（Instagram 帖子、Facebook、Twitter 头图）、16:10（平板电脑、某些笔记本）。理解各比例的起源有助于在正确的场景使用正确的比例——不是所有设计都适合 16:9，某些内容的 9:16 竖屏呈现效果更好。

YouTube 与现代互联网视频采用 16:9 标准（宽度 16 份，高度 9 份），也称 HD（1280×720、1920×1080）。这个比例源自 2005 年 HDTV 标准的普及，取代了旧的 4:3 比例（800×600、1024×768）。4:3 比例至今仍在教育、监控、PowerPoint 演示中使用（纵横比 1.33:1）。3:2 是摄影的黄金标准，35mm 单反相机的原生输出，裁切灵活性强（可裁为 16:9 或 4:3）。而 9:16 竖屏比例近年随短视频爆发而流行，字节系 TikTok、抖音、Instagram Reels 均采用此比例，优化了移动竖屏观看体验。相比之下，电影行业的 21:9 或 2.39:1 是超宽比例，用于大银幕放映，适配影院的宽屏投影，互联网视频很少使用（需加黑边）。选择比例时应考虑内容的最终输出媒介与观众的设备。

印刷行业有久经考验的比例标准。A4 纸张的比例是 297mm × 210mm，化简为 √2:1（约 1.414:1），这个比例来自国际纸张标准 ISO 216，具有唯一的数学性质：对折后仍保持相同比例。B5、A3 等也都遵循此标准。商业名片通常 3.5"×2"（3.5:2 或 1.75:1）。海报设计常用黄金比例 1.618:1（φ Phi），认为最赏心悦目，但在实践中很少严格遵循，设计师多凭审美直觉。网页设计中，头图与 Hero Banner 流行 16:9（全宽视频背景）、2:1（宽敞感）、3:1（超宽 banner）。产品卡片通常 4:3 或 16:9，确保缩略图不会显示不全。若设计的内容需多渠道投放（网页、App、社交），应选择灵活的比例（如 3:2），方便裁切至各平台标准。

CSS 的 aspect-ratio 属性（CSS Containment Module Level 3）允许开发者直接指定元素的宽高比，浏览器自动根据宽度计算高度（或反之）。语法简洁：.video-container { aspect-ratio: 16 / 9; width: 100%; } 浏览器会自动设置 height = width × (9/16)。这完全替代了旧的 padding-bottom 黑魔法（padding-bottom: 56.25% 模拟 16:9），代码更清晰、性能更好。支持计算过程中保持宽高比锁定，防止图片/视频加载时页面抖动（Cumulative Layout Shift）。aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15+ 原生支持，Edge 基于 Chromium 也支持。对于需兼容旧浏览器的项目，可用 @supports 检测与降级处理。响应式设计中，可对不同断点设置不同的 aspect-ratio：@media (max-width: 768px) { .card { aspect-ratio: 1; } } 在手机上显示为正方形，桌面则 16:9。

Tailwind CSS 4.0+ 内置 aspect-ratio 工具类，无需手写 CSS。常用类包括：aspect-auto（默认，不强制比例）、aspect-square（1:1）、aspect-video（16:9）、aspect-[4/3]、aspect-[3/2]、aspect-[16/10] 等。使用示例：<img class="w-full aspect-video" src="..." /> 自动生成 aspect-ratio: 16 / 9，图片自适应宽度同时保持比例。对于自定义比例（如 5:3），可用方括号语法 aspect-[5/3]。特别地，aspect-video 是网页开发最常用的工具类，快速实现响应式视频容器或图片卡片。Tailwind 的好处在于避免手写 CSS 规则，提高开发速度；缺点是增加 HTML 中的 class 名数量。若项目未使用 Tailwind，可直接用原生 CSS aspect-ratio 或 SCSS 混合宏。许多 UI 框架（Material UI、Ant Design）也内置长宽比组件或工具。

响应式图片设计要求在不同设备上显示正确的分辨率，同时保持美观的比例。<picture> 元素可根据媒体查询加载不同的 <source>，并保持一致的 aspect-ratio。例如桌面显示 16:9、手机显示 1:1 的正方形缩略图，可用 CSS 与 aspect-ratio 灵活切换：<picture> <source media="(max-width: 768px)" srcset="square.jpg"> <img src="wide.jpg" class="aspect-video md:aspect-square"> </picture>。图片懒加载库（如 Intersection Observer）应确保 placeholder 元素保持相同的 aspect-ratio，防止加载完成后的布局抖动。CDN 服务（Cloudinary、imgix）支持按 aspect-ratio 自动裁切或填充，减少前端处理复杂性。对于用户上传的图片（头像、产品图），应强制规范化为特定的 aspect-ratio（如 1:1），服务器端做转换裁切，确保一致性。

YouTube 视频、在线教学、WebRTC 直播 → 16:9（标准网络视频）。TikTok、Instagram Reels、短视频 → 9:16（竖屏优先）。Twitter、Facebook 社交分享图 → 1.2:1 或自适应（Facebook 推荐 1200×628px，1.91:1）。LinkedIn 文章头图 → 1200×627px（约 1.91:1）。Product Hunt 产品图 → 正方形 1:1 或 4:3（宽敞感）。网页 Hero Banner → 16:9 或 2:1（全宽背景）。电商产品卡片 → 4:3 或 1:1（分类页缩略图通常正方形）。团队头像与头像框 → 1:1（正方形）。A/B 测试 banner → 3:1 或 4:1（超宽，吸引注意力）。Instagram 故事 → 9:16（竖屏，全屏显示）。决策关键：①输出媒介（设备/平台），②观众使用习惯，③内容裁切的灵活性，④团队的快速迭代能力。