宽高比
图像或视频的宽度与高度之比,在调整大小和裁剪时保持形状不变形的关键参数。
宽高比 (Aspect Ratio) 表示图像或视频帧的宽度与高度的比例关系,通常以 W:H 的形式表示。保持宽高比是图像缩放和裁剪中避免变形的基本原则。
常见的宽高比标准:
- 1:1: 正方形,社交媒体头像和 Instagram 帖子的经典格式
- 4:3: 传统电视和早期数码相机的标准比例
- 16:9: 宽屏显示器和视频的主流标准,Full HD (1920×1080) 和 4K (3840×2160) 均采用此比例
- 3:2: 35mm 胶片和多数数码单反相机的原生比例
- 21:9: 超宽屏显示器和电影画面比例
在 Web 开发中,CSS 的 aspect-ratio 属性可以声明式地设定元素的宽高比,配合 object-fit 控制图像在容器中的填充方式。响应式设计中,保持宽高比可防止布局偏移 (CLS),提升用户体验和 Core Web Vitals 评分。