# 什么是宽高比？
在图形设计、摄影和前端开发中，宽高比（Aspect Ratio）描述了图像、屏幕或容器宽度与高度之间的几何关系。它通常用冒号分隔的两个数字表示（如16:9），显示高度如何随宽度成比例增加。宽高比处理不当是导致照片被压缩、视频出现意外裁剪（黑边）或网页组件在从手机到超宽显示器等不同设备上显示错乱的常见原因。# 行业常用比例
根据您的专业领域，您会经常接触到一些全球标准比例：- 16:9（宽屏）： 现代显示器、电视、YouTube 录制或标准高清分辨率（如 1920×1080 或 4K）的绝对主流格式。
- 9:16（垂直）： 源自移动端的原生内容消费（TikTok、Instagram Reels、YouTube Shorts）。与宽屏视频比例完全相同，但设备处于物理旋转状态。
- 4:3（经典 / 复古）： 见于旧电视和显示器，或者某些模拟及专用数字相机。其接近正方形的外观将注意力直接吸引到构图的中心轴上。
# 网页开发与 CSS aspect-ratio 属性
以前在 CSS 中，为了避免页面加载时严重的内容偏移（CLS），开发者不得不使用 Padding Hack（例如设置padding-top: 56.25%）等复杂的数学方法来为 YouTube iframe 或封面图预留动态空间。如今，所有现代布局都直接应用 aspect-ratio: 16 / 9; 等属性，从而实现语义化代码，并允许浏览器根据 Grid 或 Flexbox 定义的原始宽度自动推导出缺失的维度。此本地像素计算器将设计决策权交给即时缩放计算，从而保护您的渲染效果免受灾难性配置错误的影响。