工具大全
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)。