FXEA365 — 免費MT5自動交易EA
Sponsored本站同一團隊開發的MT5智能交易系統：公開多年回測數據，強制硬停損，提供免費版本。
查看免費EA →寬高比計算器(縮放時保持比例)
設定目標比例和一個尺寸, 另一個自動計算。反向同樣可用。影片、圖片裁剪、響應式 web 佈局都適用。
- 寬高比
- 16:9
- 小數
- 1.7778
- 尺寸
- 1920 × 1080
相關工具
運作原理
寬高比是什麼
寬高比描述寬相對高: 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 重要
現代 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 在豎手機上會留上下空白。
›資料會上傳嗎?
不會。計算在本地。
推薦服務
廣告說明NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →Cloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →