CSS 長寬比計算機是什麼？
這個工具會把任何以像素為單位的寬度與高度，換算成簡潔好讀的長寬比，例如 16:9 或 4:3。它同時也會計算經典的 padding-top 百分比——在現代 CSS aspect-ratio 屬性還未被廣泛支援之前，前端開發者就是靠這個技巧，讓影片、iframe、圖片容器等響應式區塊維持固定比例。
如何使用
填入原始的寬度與高度（單位為像素）。計算機會以最大公因數（GCD）將比例化簡到最簡形式，顯示小數比值（寬 ÷ 高），並給你一個可以直接貼進 CSS 的 padding-top 百分比。
公式解析
第一步，先求出寬與高的最大公因數（GCD）。把兩個數字同時除以 GCD，就能得到化簡後的比例。
Ratio = ((Width) ÷ (\gcd)) : ((Height) ÷ (\gcd))
舉例來說，1920 與 1080 的 GCD 是 120，因此比例化簡為 16:9。至於 padding-top 技巧，公式是 height ÷ width × 100，因為在 CSS 中，百分比的 padding 是以元素的寬度為基準來計算的。Padding = ((Height) ÷ (Width)) × 100% \qquad Decimal = ((Width) ÷ (Height))
實例演練
以一張 1920×1080 的圖片為例：\gcd(1920, 1080) = 120。
Ratio = ((1920) ÷ (120)) : ((1080) ÷ (120)) = 16:9
小數比值 = 1920 ÷ 1080 ≈ 1.7778。padding-top = ((1080) ÷ (1920)) × 100 = 56.25%
因此響應式容器只要設定 padding-top: 56.25% 即可。
使用注意事項與精準校對原則（6 大核心守則）
📐 1. 嚴格對齊輸入量綱與單位
輸入各項數值時請務必確認量綱（例如小時、天數、金額、百分比），避免單位不匹配引發推算偏差。
🔒 2. 純前端本機毫秒級隱私保障
所有計算邏輯 100% 在您的終端瀏覽器內完成，資料絕不上傳伺服器，嚴格守護商業與個人隱私。
📊 3. 符合公認學術與產業計算模型
演算法嚴格遵循國際通用數學公式與標準計算模型，經多重情境交叉核對，數值嚴密精確。
📋 4. 一鍵複製與免登入 PDF 匯出
支援一鍵複製推算結果字串至剪貼簿，亦可直接點擊列印按鈕輸出純淨 PDF 工作報表。
🔄 5. 多情景敏感度動態對比
建議針對極端值與多組預期情景分別試算，觀察輸出數據的波動區間，輔助做出更穩健的決策。
🛡️ 6. 專業諮詢與日常參考免責聲明
本工具運算結果供日常排程、學業研習與事前參考之用，如涉及重大法規或投資決策請諮詢持證專家。
常見問題 (FAQ)
為什麼要用 padding-top，而不直接用 aspect-ratio 屬性？
padding-top 這個老招數在所有瀏覽器都能運作，連非常舊的版本也不例外。如果你的專案只需支援較新的環境，直接使用aspect-ratio: 16 / 9;會更簡單。
百分比是以寬度還是高度為基準？
在 CSS 中，垂直方向的 padding 百分比一律以容器區塊的寬度為基準，這正是公式為什麼是 height ÷ width 的原因。
如果我的數字無法化簡成漂亮的比例怎麼辦？
任何寬高都能算出有效的比例，只是不一定剛好對應到 16:9 這類常見的命名而已。遇到這種情況，小數比值會特別實用。