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 的 GCD 是 120，因此比例化簡為 16:9。至於 padding-top 技巧，公式是 height ÷ width × 100，因為在 CSS 中，百分比的 padding 是以元素的寬度為基準來計算的。$$\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} = \mathbf{16:9}$$小數比值 = \(1920 \div 1080 \approx 1.7778\)。$$\text{padding-top} = \frac{1080}{1920} \times 100 = \mathbf{56.25\%}$$因此響應式容器只要設定 padding-top: 56.25% 即可。
常見問題
為什麼要用 padding-top，而不直接用 aspect-ratio 屬性？padding-top 這個老招數在所有瀏覽器都能運作，連非常舊的版本也不例外。如果你的專案只需支援較新的環境，直接使用 aspect-ratio: 16 / 9; 會更簡單。
百分比是以寬度還是高度為基準？在 CSS 中，垂直方向的 padding 百分比一律以容器區塊的寬度為基準，這正是公式為什麼是 height ÷ width 的原因。
如果我的數字無法化簡成漂亮的比例怎麼辦？任何寬高都能算出有效的比例，只是不一定剛好對應到 16:9 這類常見的命名而已。遇到這種情況，小數比值會特別實用。
