什么是 CSS 宽高比计算器？

这款工具能把任意像素宽度和高度换算成简洁的化简宽高比，比如 16:9 或 4:3。它还会算出经典的 padding-top 百分比。在现代 CSS aspect-ratio 属性尚未被广泛支持的年代，前端开发者就是靠这个百分比，让视频、iframe、图片容器等响应式元素始终保持固定比例。

如何使用

填入原始的宽度和高度（单位为像素）即可。计算器会借助最大公约数（GCD）把比例化简到最简形式，同时给出小数比例（宽 ÷ 高），以及可以直接粘贴进 CSS 的 padding-top 百分比。

第一步，求出宽度和高度的最大公约数（GCD）。再用这两个数分别除以 GCD，就得到了化简后的比例。

$$\text{Ratio} = \frac{\text{Width}}{\gcd} : \frac{\text{Height}}{\gcd}$$

举个例子，1920 和 1080 的最大公约数是 120，因此比例化简为 16:9。padding-top 技巧用的是 高度 ÷ 宽度 × 100，因为 CSS 中的百分比内边距是相对于元素的宽度来计算的。

$$\text{Padding} = \frac{\text{Height}}{\text{Width}} \times 100\% \qquad \text{Decimal} = \frac{\text{Width}}{\text{Height}}$$

以一张 1920×1080 的图片为例：$\gcd(1920, 1080) = 120$。

$$\text{Ratio} = \frac{1920}{120} : \frac{1080}{120} = \textbf{16:9}$$

小数比例 = $1920 \div 1080 \approx 1.7778$。padding-top = $1080 \div 1920 \times 100 = \textbf{56.25\%}$。也就是说，响应式容器应当写成 padding-top: 56.25%。

为什么要用 padding-top，而不直接用 aspect-ratio 属性？padding-top 这套老办法在所有浏览器里都管用，连非常老旧的版本也不例外。如果是面向现代浏览器的新项目，直接写 aspect-ratio: 16 / 9; 就好。

这个百分比是以宽度还是高度为基准？在 CSS 里，纵向的内边距百分比永远是相对于包含块的宽度计算的，所以公式才是高度 ÷ 宽度。

如果我的数值没法化简成漂亮的整数怎么办？任何宽高组合都能得出一个有效的比例，只是不一定能对应到 16:9 这样的常见名称。这种情况下，小数比例就特别有参考价值。

小数比例（宽÷高）	1.7778
padding-top 技巧（%）	56.25%