宽高比完全指南 - 如何在 16:9、4:3 和 1:1 之间选择
宽高比基础 - 比例如何影响视觉效果
宽高比（Aspect Ratio）是图像宽度与高度的比值，决定了图像的整体形状和视觉感受。不同的宽高比传达不同的情感：宽幅（16:9、21:9）给人开阔、电影感的印象；方形（1:1）感觉稳定、平衡；竖幅（9:16）适合移动端浏览和人像展示。
常见的宽高比及其典型用途：16:9（宽屏标准，视频、演示文稿、网页横幅）、4:3（传统显示器比例，文档、老照片）、1:1（社交媒体头像、产品图）、3:2（35mm 胶片标准，单反相机默认）、9:16（手机竖屏视频、Stories）。
选择宽高比时需要考虑：目标平台的要求（社交媒体各有规定）、内容类型（风景适合宽幅，人像适合竖幅）、显示设备（桌面 vs 移动端）、以及与周围元素的视觉协调性。
数学上，宽高比可以表示为分数（16/9 ≈ 1.778）或冒号形式（16:9）。相同比值的不同分辨率具有相同的宽高比：1920x1080、1280x720、3840x2160 都是 16:9。
各平台宽高比要求 - 社交媒体与广告
不同平台对图像尺寸有严格要求，不符合规格的图像会被裁剪或压缩。
Instagram：正方形 1:1（1080x1080）、横向 1.91:1（1080x566）、纵向 4:5（1080x1350）。Stories 和 Reels 使用 9:16（1080x1920）。Feed 中 4:5 竖图获得最大显示面积。
Twitter/X：单图推荐 16:9（1200x675）或 2:1。多图时自动裁剪为不同比例。卡片预览使用 1.91:1。
Facebook：Feed 图片推荐 1.91:1（1200x628）。封面照片 2.7:1（820x312）。Stories 9:16。广告图片根据版位不同有不同要求。
YouTube：视频和缩略图统一使用 16:9（1280x720 最低，推荐 1920x1080）。Shorts 使用 9:16。
LinkedIn：文章封面 1.91:1（1200x627）。个人横幅 4:1（1584x396）。
最佳实践：为每个平台准备专用尺寸的图像，而非使用同一张图片裁剪。关键内容（文字、人脸）放在安全区域内，即使被裁剪也不会丢失重要信息。
掌握 16:9 - 主导的宽屏标准
16:9 是当今最普遍的宽高比，从电视、显示器到视频平台都以此为标准。
为什么 16:9 成为标准：2009 年国际电信联盟（ITU）将 16:9 确定为高清电视标准。它是 4:3（传统电视）和 2.35:1（电影宽银幕）之间的折中，能同时较好地展示两种内容。现代显示器几乎全部采用 16:9 或更宽的比例。
常见 16:9 分辨率：720p（1280x720）、1080p（1920x1080）、1440p（2560x1440）、4K（3840x2160）、8K（7680x4320）。
适用场景：视频内容（YouTube、网课、直播）、网页横幅和 Hero 图像、演示文稿（PowerPoint 默认）、桌面壁纸、游戏画面。
16:9 的局限：在手机竖屏浏览时，16:9 横图显示面积很小（仅占屏幕约 1/3 高度）。移动优先的设计中，考虑使用 4:5 或 1:1 以获得更大的视觉冲击力。
裁剪技巧：将 16:9 图像裁剪为其他比例时，使用"三分法"确保主体不被裁掉。预留安全边距，使图像在不同裁剪比例下都能保持核心内容完整。
1:1 与 4:3 的选择 - 根据内容匹配比例
1:1 正方形：
正方形图像在视觉上最稳定和平衡。Instagram 将其推广为社交媒体的标准格式。适合：产品展示（居中构图）、头像和 Logo、瓷砖式网格布局、需要在 Feed 中获得最大注意力的内容。
正方形的挑战：风景和全身人像难以在正方形中构图。解决方案是在正方形画布中留白，或使用创意裁剪突出局部。
4:3 传统比例：
4:3 是传统电视和早期数码相机的标准比例。虽然在视频领域已被 16:9 取代，但在某些场景仍然适用：文档和书籍页面、iPad 屏幕（接近 4:3）、微型四三系统相机的原生比例、需要更多垂直空间的内容。
3:2 摄影标准：
3:2 源自 35mm 胶片（36x24mm），是大多数单反和无反相机的默认比例。比 4:3 稍宽，比 16:9 窄得多。在摄影作品展示中最为自然，因为这是相机原生输出的比例，无需裁剪。
选择建议：内容决定比例，而非反过来。先确定要展示什么，再选择最能突出内容的比例。
响应式设计中的宽高比控制
在响应式 Web 设计中，保持图像宽高比一致是常见挑战。
CSS aspect-ratio 属性：现代 CSS 提供了原生的宽高比控制：img { aspect-ratio: 16 / 9; object-fit: cover; }。浏览器会自动计算高度以保持指定比例。所有现代浏览器支持。
object-fit 配合使用：object-fit: cover 裁剪图像以填满容器（可能裁掉边缘）；object-fit: contain 缩放图像以完整显示（可能留白）。object-position 控制裁剪的焦点位置。
padding-top 技巧（旧方法）：在 aspect-ratio 属性出现之前，使用 padding-top: 56.25%（9/16 * 100%）创建 16:9 的容器。现在仍可作为不支持 aspect-ratio 的浏览器的回退方案。
响应式图像与宽高比：使用 <img> 的 width 和 height 属性告知浏览器图像的固有宽高比，防止布局偏移（CLS）。即使图像通过 CSS 设为 width: 100%，浏览器也能在图像加载前预留正确的空间。
Art Direction：使用 <picture> 元素在不同屏幕尺寸下提供不同宽高比的图像。桌面端使用 16:9 横图，移动端切换为 1:1 或 4:5 竖图，确保在所有设备上都有最佳视觉效果。
视频与电影宽高比 - 从宽银幕到短视频
视频领域的宽高比选择更加多样，从超宽电影画面到竖屏短视频。
2.39:1（CinemaScope）：电影院宽银幕标准。极宽的画面适合展示壮观的风景和史诗场面。在普通 16:9 显示器上播放时会出现上下黑边（letterbox）。
1.85:1（Academy Flat）：美国电影院的另一个标准比例，比 16:9 略宽。许多好莱坞电影使用此比例。
9:16 竖屏视频：TikTok、Instagram Reels、YouTube Shorts 的标准。针对手机竖屏观看优化。拍摄时需要完全不同的构图思维 - 主体居中，利用垂直空间。
1:1 方形视频：在社交媒体 Feed 中比 16:9 占据更多屏幕面积。适合产品展示和教程类内容。
多比例发布策略：同一内容需要适配多个平台时，拍摄时使用最宽的比例（16:9 或更宽），后期裁剪为各平台所需比例。关键内容保持在画面中心的"安全区域"内。
趋势：随着移动端观看比例持续增长，9:16 竖屏内容的重要性不断上升。但桌面端和电视端仍以 16:9 为主。多比例适配能力成为内容创作者的必备技能。