寬高比計算器(縮放時保持比例)

設定目標比例和一個尺寸, 另一個自動計算。反向同樣可用。影片、圖片裁剪、響應式 web 佈局都適用。

比例 W比例 H寬高

運作原理

寬高比描述寬相對高: 16:9 表示每 9 單位高對應 16 單位寬。同一比例任何尺寸適用 — 1920×1080 與 800×450 都是 16:9。縮放時保持寬高比可避免拉伸或擠壓, 也是響應式設計的基礎。

比例可輸入整數 (16:9) 或小數 (1.78:1), 寬高任意尺寸。編輯任一欄位, 其他自動更新以維持比例。小數比 (寬/高) 用於 CSS calc() 或影片編輯工具。

16:9 — 現代 HDTV、電腦顯示器、YouTube、2009 年後大多數電影。今天幾乎所有場合的預設。

9:16 — Instagram Stories、TikTok、YouTube Shorts 的豎屏影片。手機優先內容的 16:9 翻轉。

1:1 — 正方形。Instagram 資訊流 2021 年前預設。專輯封面、頭像。

4:3 — HD 之前的舊 TV 與顯示器。仍用於一些經典風格內容。

3:2 — 單反相機預設。35mm 膠片。大尺寸列印。

21:9 — 超寬影院。變形寬銀幕電影。部分 PC 顯示器與 LG TV。

現代 CSS 有 aspect-ratio: 16/9; — 設比例讓瀏覽器從寬計算高 (反之亦然)。避免舊的 padding-bottom 黑魔法, 是響應式嵌入與圖片佔位避免佈局抖動 (CLS) 的關鍵。

Cumulative Layout Shift (CLS) 是 Core Web Vitals 之一。嵌入影片、未指定尺寸的圖片、廣告都可能導致 CLS — 設定明確 width/height (瀏覽器據此算寬高比) 或用 CSS aspect-ratio 修復。

›16:9 與 1.78:1 區別?

比例相同, 寫法不同。16/9 = 1.778。冒號形式在電視/web 通用; 小數形式在電影通用。

›CSS 裡如何保持寬高比?

用 aspect-ratio 屬性: img { aspect-ratio: 16/9; width: 100%; height: auto; }。圖片填充容器寬, 高自動維持比例。

›為什麼我的影片在 4:3 電視上看起來不對?

現代影片大多 16:9。在 4:3 顯示上要麼加黑邊、加上下黑條、要麼拉伸。電視設定控制使用哪種。

›可以用非整數比例?

可以 — 輸入 1.5 或 2.39。計算器視為小數; 化簡後的比例輸出僅在整數比例時顯示。

›「畫素寬高比」是什麼?

另一概念: 單個畫素的形狀。現代顯示用方形畫素 (1:1)。一些舊 SD 影片格式用非方形畫素 (NTSC 寬屏 1.0667 等)。本工具處理顯示寬高比, 不是畫素寬高比。

›「電影感」是什麼?

21:9 (更準確 2.39:1 或 2.40:1) — 比 HDTV 更寬。常見於現代大片。流媒體常以此比例呈現電影。

›為什麼 Instagram Reel/TikTok 用 9:16?

因為手機通常豎握。9:16 用內容填滿整個手機螢幕; 16:9 在豎手機上會留上下空白。

›資料會上傳嗎?

不會。計算在本地。