Back
Aspect Ratio Calculator
:
Width
Height
Simplified ratio
16:9
Decimal ratio
1.777778
Padding-bottom %
56.2500%
Megapixels
2.07 MP
Preview
1920 × 1080
16:9 · 1920×1080px
Common sizes at 16:9
Common Aspect Ratios
CSS Snippet
.container {
width: 1920px;
aspect-ratio: 16 / 9;
/* padding-bottom trick (legacy): */
/* padding-bottom: 56.2500%; */
}使用指南 / 为什么使用此工具 / 常见问题
使用指南
输入宽高比(或选择预设),再输入宽度或高度,另一个尺寸会自动按比例计算。锁定按钮可固定比例进行缩放。底部 CSS 代码片段可直接复制到样式表。
为什么使用此工具
无需手动计算宽高比。即时求出视频、图片或容器的正确尺寸。生成的 CSS 片段可直接用于响应式设计。
常见问题
- 什么是宽高比?
- 宽高比是宽度与高度的比例关系,写作 W:H(如 16:9 表示宽屏视频)。
- 什么是 padding-bottom CSS 技巧?
- 将 padding-bottom 设为宽度的百分比是维持宽高比的传统方法。现代浏览器已原生支持 aspect-ratio 属性。
- 可以输入小数比例(如 2.35:1)吗?
- 可以,工具支持小数输入,如电影变形宽银幕(2.35:1)或宽屏院线(1.85:1)。