宽高比完全指南 - 如何在 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。
换算成具体分辨率会更直观：16:9 表示宽为 16 时高为 9，1,920 × 1,080 px 与 3,840 × 2,160 px 都属于这个比例。常用比例一览——16:9（1.78:1）是现代宽屏标准，接近人眼视野的横向构图，适合风景与影像内容；4:3（1.33:1）是经典比例，视线容易集中在中央，给人简洁有力的印象；21:9（2.33:1）属于超宽比例，适合全景与电影感的呈现。
各平台宽高比要求 - 社交媒体与广告
不同平台对图像尺寸有严格要求，不符合规格的图像会被裁剪或压缩。
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）。
最佳实践：为每个平台准备专用尺寸的图像，而非使用同一张图片裁剪。关键内容（文字、人脸）放在安全区域内，即使被裁剪也不会丢失重要信息。
各平台的推荐尺寸：YouTube 缩略图为 16:9（推荐 1,280 × 720 px），Shorts 为 9:16（1,080 × 1,920 px）。Instagram 的信息流支持 1:1（1,080 × 1,080 px）、4:5（1,080 × 1,350 px）与 16:9（1,080 × 608 px），快拍和 Reels 为 9:16（1,080 × 1,920 px），头像为 1:1（320 × 320 px）。X（原 Twitter）的时间线显示为 16:9（推荐 1,200 × 675 px），单张投稿最宽支持到 2:1，多张投稿则会发生自动裁剪。Facebook 的链接预览是 1.91:1（1,200 × 630 px），活动封面为 16:9（1,920 × 1,080 px）。OGP（Open Graph Protocol）推荐 1.91:1（1,200 × 630 px），这个比例被 Facebook、Slack、Discord 等的链接预览广泛采用。实务上如果要从一份素材生成多种比例，先以最宽的比例（16:9 或 2:1）拍摄与制作，再裁剪出其他比例最有效率。
掌握 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 图像裁剪为其他比例时，使用"三分法"确保主体不被裁掉。预留安全边距，使图像在不同裁剪比例下都能保持核心内容完整。
16:9 从 2000 年代起成为数字媒体事实上的标准：HDTV（1,920 × 1,080）、4K UHD（3,840 × 2,160）、8K（7,680 × 4,320）都采用这个比例。它成为标准有三条脉络：一是与人眼视野的亲和性——人的水平视野约 180 度、有效视野约 120 度，横长比例更自然，从 4:3 转向 16:9 正是为了更强的沉浸感；二是标准化，1990 年代电影电视工程师协会（SMPTE）把 16:9 采纳为 HDTV 标准，其数值接近 4:3 与 2.35:1（电影宽银幕）的几何平均；三是设备普及，PC 显示器、笔记本、平板以及横持的手机几乎都采用 16:9 或接近的比例。最适合 16:9 的用途包括 YouTube 视频与缩略图制作、PowerPoint / Google Slides 演示（默认即为 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 窄得多。在摄影作品展示中最为自然，因为这是相机原生输出的比例，无需裁剪。
选择建议：内容决定比例，而非反过来。先确定要展示什么，再选择最能突出内容的比例。
补充两点选择依据：1:1 的正方形适合电商的商品图（Amazon、乐天的商品图基本都是正方形），也是图标与头像的标准，用 CSS 的 aspect-ratio: 1/1 很容易搭出网格布局；4:3 源自数码相机的传感器尺寸（微四三系统），iPad 的原生分辨率 2,048 × 1,536 px 也是这个比例，适合文档、旧版幻灯片与扫描件，人像摄影中也容易平衡主体与背景。
响应式设计中的宽高比控制
在响应式 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 竖图，确保在所有设备上都有最佳视觉效果。
CSS 的 aspect-ratio 属性自 2021 年起获得全部现代浏览器支持，用 aspect-ratio: 16/9 就能声明式地指定比例，配合 width: 100% 即可在跟随父元素宽度的同时保持比例，对防止 CLS（Cumulative Layout Shift）很有效。固定比例容器可以写作 .container { aspect-ratio: 16/9; width: 100%; overflow: hidden; }，内部图像用 object-fit: cover 显示；响应式切换则用媒体查询按屏幕宽度改变比例，桌面端 16:9、移动端切到 4:3 或 1:1；也可以在 <picture> 的 <source> 中按屏幕宽度提供不同比例的图像。为 <img> 明确写出 width 与 height 属性，浏览器就能在图像加载前算出比例、避免布局位移；HTML 属性的优先级低于 CSS 的 aspect-ratio，因此可以用 CSS 覆盖。要改善 Core Web Vitals 的 CLS 分数，这个属性指定是最省力且有效的手段。
视频与电影宽高比 - 从宽银幕到短视频
视频领域的宽高比选择更加多样，从超宽电影画面到竖屏短视频。
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 为主。多比例适配能力成为内容创作者的必备技能。
影视比例的补充：宽银幕比例在 Netflix 的原创电影中也大量使用；1.85:1（维斯塔尺寸）是北美影院最常见的比例，接近 16:9，转为电视播放时损失小，因此喜剧与剧情片偏好它；2.76:1（Ultra Panavision 70）是极端的横长比例，只在《八恶人》（2015）等少数作品中使用。9:16 的竖屏视频是 TikTok、Instagram Reels、YouTube Shorts 的标准，为竖持手机优化，推荐分辨率是 1,080 × 1,920 px；2020 年以后竖屏视频的观看时长保持着年均 200% 以上的增长。4:5 的竖长比例在 Instagram 信息流中能获得最大显示面积，据称广告与推广投稿的 CTR（点击率）相比 16:9 提升约 30-40%。开发者处理视频比例时的要点：YouTube 嵌入使用 aspect-ratio: 16/9 的容器；嵌入竖屏视频时限制最大高度，避免在桌面端占满屏幕；<video> 元素务必指定 width 与 height 以防止 CLS；信箱式（上下黑边）与画柱式（左右黑边）的背景色可以按内容自定义。