CSS 寬高比計算器

寬高比描述元素寬度與高度的比例關係，以冒號分隔的兩個數字表示，例如 16:9。兩個尺寸以相同倍率縮放時，比例不變。網頁開發者會用比例為圖片、影片、嵌入內容、卡片及響應式元件預留穩定空間，讓內容尚未載入完成時也能維持版面。本計算器可約分任何一對整數尺寸，並產生對應的現代 CSS 宣告。 約分使用寬高的最大公因數。1920 × 1080 的最大公因數為 120，兩邊除以 120 後得到 16 × 9。小數值是寬度除以高度，因此 16:9 約為 1.7778。CSS 的 aspect-ratio 屬性可接受約分後的數字或原始尺寸，但最簡形式較容易辨識與檢閱。產生的宣告可貼入圖片外框、影片容器、網格項目或其他盒子的樣式規則。 aspect-ratio 屬性提供的是偏好比例。當元素寬度確定、高度自動時，瀏覽器會依比例推算高度；若高度確定、寬度自動，則可推算寬度。兩個尺寸都明確固定時，比例不會覆寫它們。內容、最小與最大尺寸、盒模型及版面限制，也可能影響最終呈現尺寸。將 width: 100% 搭配寬高比，是建立響應式媒體容器的常見方式。 寬高比不同於解析度。兩張圖片都可以是 16:9，但像素數量相差很大，例如 1280 × 720 與 3840 × 2160。比例控制形狀，解析度則影響細節、檔案大小與顯示密度。將圖片裁成新比例會移除內容；把完整圖片放入不同形狀的盒子，則可能留下空白。CSS object-fit 的 cover、contain 等值，決定替換內容在預留盒子內如何呈現。 為避免版面位移，請使用來源素材的固有尺寸。即使響應式 CSS 改變顯示大小，HTML 的 width 與 height 屬性仍可讓瀏覽器推算比例。若依構圖選擇不同圖片或使用特殊斷點，請確認每個來源都有預期的構圖。本計算器可用任何共同單位，因為只考慮比例；但要求整數，讓最大公因數結果精確，產生簡潔且可預期的比例。