我曾經發布過一個 WordPress 主題,其中手機上的每個特色圖像看起來都像經過了損壞。臉被拉伸,標誌被壓扁。原因是 CSS 檔案中的三個字元:a height: 240px 坐在a旁邊 width: 100%. 在 375 像素手機上,其比例約為 1.56:1,影像為 16:9 - 1.78:1。紙上沒有太大差異。在人臉上非常明顯。
縱橫比是感覺太簡單而不能出錯的事情之一,所以沒有人會仔細檢查它。這是一個單一的部門。但它悄悄地破壞了影片導出、在錯誤位置裁剪的 OpenGraph 預覽、帶有黑條的縮圖以及在 27 吋顯示器上看起來不錯但在手機上看起來很糟糕的英雄圖像。數學是微不足道的;舍入錯誤的成本不是。
我建造 工具。dev 我不斷地進行這種計算 - 為插件調整圖像的大小'管理螢幕,匯出 Reels 格式的視頻,計算出 OpenGraph 圖像實際上應該是什麼。所以我建造了 縱橫比計算器 在一個領域中做到這一點並展示其工作原理。給它一個比例和一個維度,它會給你另一個維度。給它一個尺寸,它會將其縮小到該比率並告訴您該比率被稱為什麼。
TL;DR: 縱橫比是寬度除以高度,寫成兩個帶有冒號的數字。尋找缺失的高度:
width × (ratioHeight ÷ ratioWidth). 找出缺失的寬度:height × (ratioWidth ÷ ratioHeight)。 要從大小中得出比率,請將兩個數字除以它們的最大公約數 - 1920 和 1080 共享 120 的 GCD,即 16:9。這 縱橫比計算器 這三個內容都在您的瀏覽器中執行,預設為 16:9、9:16、1:1、4:3、3:2、21:9、1.91:1 和 2.39:1。
什麼是長寬比?
長寬比是影像與#39;之間的比例關係。它的寬度及其高度被寫成兩個被冒號分隔的數字 - 16:9、4:3、1:1 - 它所描述的是 形狀,不是尺寸。
這種區別就是整個遊戲。 1280 × 720、1920 × 1080 和 3840 × 2160 是三種不同的分辨率,具有一個長寬比。它們在三種尺寸下具有相同的形狀,這就是為什麼它們中的任何一個都可以縮放到任何其他尺寸上而不會變形或裁剪。同時,1920 × 1080 和 1920 × 1200 具有幾乎相同的寬度,不同於 120 像素的高度,並且形狀根本不同 - 一個為 16:9,另一個為 16:10,並將為其中一個設計的內容放入為另一個設計的容器中信箱或農作物。
該比率只是寬度 1080 = 1.777。。,分數 1920/1080 減少到 16/9。兩者都是相同的事實,有兩種說法:十進制形式更容易比較(顯然比 1.5 寬 1.78?),冒號形式更容易說。
您實際需要的三種計算
求解缺少的維度
你知道形狀和一側。這是實踐中最常見的情況:"我需要一個 16:9 的圖像,我的容器有 1280 像素寬 - 多高?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
而另一個方向:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
在計算器中,選擇預設或輸入比率,填寫您知道的維度,將另一個留空,然後按一下「計算」。它填入空欄位並顯示下面的算術。
將尺寸減小到其比例
您有一個尺寸並想知道它的形狀 - 通常是為了檢查兩個資產是否匹配,或者計算出客戶端和#39;的神秘尺寸出口實際上是什麼。
此方法是最大公約數。求兩個維度均分的最大數字,並將兩者除以它。對於 1920 年和 1080 年,該數字為 120:1920 RIST 120 = 16,1080 RIST 120 = 9。比率 16:9。
這就是答案變得有趣的地方,因為現實世界的尺寸經常如此 不是 降低到有利於行銷的比例。 3440 × 1440 超寬顯示器減少至 43:18。 2560 × 1080 減至 64:27。兩者均以 " 出售;21:9"實際上兩者都不是 - 21:9 都是 3360 × 1440。標籤是將小數(2.39:1 和 2.37:1)四捨五入為 16:9 旁邊聽起來整潔的東西。計算器為您提供真正的減小比例和小數,因此您可以根據現實而不是規格表進行尺寸調整。
縮放和擬合
同一想法的兩個變體。 縮放 將兩個維度乘以相同的因子,根據定義,該比率保持不變 - 1920 × 1080 的 50% 比例為 960 × 540,仍然是 16:9。 配件 縮小來源大小,直到它位於邊界框內而不會失真:取較小的 boxWidth ÷ sourceWidth 和 boxHeight ÷ sourceHeight 並按此縮放。安裝在 1200 × 1200 盒子中的 4000 × 3000 張照片變為 1200 × 900。這正是 CSS 的內容 object-fit: contain 確實如此,以及當您要求最大尺寸調整大小時,影像 CDN 的作用。
縱橫比計算器的主要特徵
十個預設,標示實際使用的位置
16:9 適用於標準影片和大多數顯示器。捲軸、短片、TikTok 和故事 9:16。方形社交貼文和頭像為 1:1。舊顯示器和 iPad 為 4:3。 3:2 用於數位單眼攝影和 35 毫米膠片。肖像照片為 2:3。 8×10列印為5:4。 21:9 超寬。 1.91:1 適用於 OpenGraph 連結預覽影像。 2.39:1 對於變形寬螢幕。懸停預設會告訴您它的用途,這比您試圖記住 Instagram 想要哪個號碼更重要。
每個答案下的公式
結果面板顯示精確的算術 - 1280 × (9 ÷ 16) = 720. 部分是為了驗證它,部分是為了將其提升到電子表格或腳本中。如果您要將維度硬編碼到 CSS 檔案或 Tailwind 配置中,您應該能夠看到該數字來自哪裡。
縮減後的比率、小數和名稱
每個結果都報告所有三種表示形式:縮小的整數比 (16:9)、其十進制形式 (1.778:1) 以及通用名稱(如果有的話)。十進制是你比較的;名稱就是您輸入設計簡介的內容。
兆像素和總像素數
每個結果都包含以百萬像素為單位的像素數。這是調整影像大小時實際預測記憶體使用和檔案大小的數字 - 4000 × 3000 張照片的尺寸是 12 MP,其尺寸是其四倍,達到 48 MP,而不是加倍。如果您正在產生響應式影像集,那麼二次關係就是您腦海中要保留的東西。當您完成尺寸調整後, 圖像調整大小 和 圖像壓縮 在瀏覽器中完成實際工作。
即時形狀預覽
結果面板中的一個矩形,繪製為您剛剛計算出的比率。這聽起來很裝飾性,但事實並非如此--當你輸入 9:16 時,最快的方法是當你期望一個寬盒子時,看一個高盒子。
客戶端、離線、無註冊
瀏覽器中的簡單 JavaScript 算術。沒有任何內容發送到任何地方,沒有任何內容被記錄,並且頁面繼續關閉網路。
我應該使用哪個縱橫比?
| 比率 | 小數 | 使用地點 | 典型的像素大小 |
|---|---|---|---|
| 16:9 | 1.778 | YouTube、HD/4K 影片、大多數顯示器、電視 | 1920×1080、3840×2160 |
| 9:16 | 0.563 | Instagram 捲軸、TikTok、YouTube 短片、故事 | 1080×1920 |
| 1:1 | 1.0 | Instagram 提要貼文、頭像、產品縮圖 | 1080×1080 |
| 4:5 | 0.8 | Instagram 肖像動態貼文(最大動態足跡) | 1080×1350 |
| 1.91:1 | 1.91 | OpenGraph/Twitter 卡連結預覽 | 1200×630 |
| 4:3 | 1.333 | iPad、舊顯示器、許多相機感應器 | 2048×1536 |
| 3:2 | 1.5 | 單眼相機和無反光鏡劇照、35 毫米膠卷、照片列印 | 6000×4000 |
| 21:9 (實際上 ~2.37 比 2.39:1) | ~2.38 | 超寬監視器、電影作物 | 3440×1440 |
| 2.39:1 | 2.39 | 變形寬銀幕電影 | 4096×1716 |
兩個實用筆記。 1200 × 630 OpenGraph 大小減少到 40:21,小數點為 1.905 - 足夠接近 1.91:1,每個人都這樣稱呼它,而且它是 Facebook、LinkedIn 和 X 都乾淨地渲染的大小。用檢查結果 開啟圖形預覽 運送前的工具,因為裁剪不當的預覽圖像是無人點擊的連結上最明顯的錯誤。 4:5 對於 Instagram 來說尤其值得一提:它在提要中佔據的垂直空間比 1:1 更多,這是免費關注。
常用案例
無失真地調整響應式影像的大小
您正在建立一個卡片網格,該設計要求在容器寬度為 384 像素的情況下使用 16:9 縮圖。計算:384 × 9 ERT 16 = 216。現在您已經有了兩個 CSS 的具體尺寸 aspect-ratio: 16 / 9 聲明和圖像導出,它們彼此一致。現代 CSS 讓這比以前更容易 - aspect-ratio 在 CSS 中,直接採用比率並讓瀏覽器進行算術 - 但您仍然需要資產本身的像素尺寸。
匯出特定平台的影片
你以 16:9 拍攝,需要 9:16 垂直切割。高度保持在 1920,因此寬度為 1920 × 9 ERT 16 = 1080。這就是你的導出大小 - 數字看起來很熟悉的原因是 1080 × 1920 只是 1920 × 1080,軸交換了,這就是"垂直視訊&報價;意思是。
計算器不會為您做的一件事是:H。264 需要偶數維度。如果您的數學結果為奇數,則將奇數面向下舍入一個像素,否則您的編碼器將拒絕該作業。
找出什麼是神秘的資產
客戶以 1440 × 1800 發送資產並詢問為什麼它們在主頁上收成不佳。減少它:1440 和 1800 的 GCD 為 360,給出 4:5。您的主頁插槽為 16:9。如果不裁剪,這兩種形狀就無法滿足--現在你有了具體的答案和要做出的決定,而不是模糊地感覺到有些東西不對勁。
檢查一組資產是否一致
在發布之前,運行每個英雄圖像'透過比率模式進行維度。如果 30 個中的一個以 1.6:1 的比例返回,而其餘的為 1.778:1,您已在即時網站上找到了看起來有點錯誤的資產,並且您先於用戶找到了它。
技術筆記值得了解
四捨五入。 大多數比率計算不會落在整個像素上。 16:9 寬度為 1000 時給出的高度為 562.5。計算器舍入到最近的整個像素,因此您得到 563 - 形狀為 1.7762:1 而不是 1.7778:1,差異約為百分之一,並且是不可見的。不要追逐它。請注意,始終如一的捨入 下來 如果您堆疊元素,跨影像集可以累積可見的漂移;每次都從來源維度而不是從先前的結果四捨五入。
像素長寬比與顯示長寬比。 在廣播影片中,這些可能有所不同:舊的 DV 素材儲存了 720 × 480 像素,但透過使每個像素非正方形來將它們顯示為 4:3。今天你幾乎不會碰任何東西來做到這一點 - 一切都是方形像素 - 但如果你正在使用傳統鏡頭並且數學拒絕相加,這就是原因。
aspect-ratio 在css中。 從 2021 年起您可以寫作 aspect-ratio: 16 / 9 當一個維度是流動的時,讓瀏覽器保持形狀。使用它。它刪除了過去必要的整類填充頂部百分比黑客,這意味著您的佈局在您從未測試過的寬度上保持正確。您仍然需要用於資產匯出的計算器,因為圖像檔案必須是真實數量的像素。
裁剪不是縮放。 如果來源比例和目標比例不同,則無法在它們之間調整大小 - 您必須裁剪、信箱或扭曲。故意選擇。 object-fit: cover 農作物(通常是您想要的照片), contain 信箱(通常是您想要的標誌),以及 fill 扭曲(幾乎從來不是你想要的,也是本文頂部我臉孔受傷的原因)。
問號
如何從寬度和高度計算縱橫比？
將這兩個數字除以它們最大的公約數。 對於 1920 × 1080，GCD 為 120，因此比率降低到 16:9。 切換此計算器以獲得比率模式，輸入兩個維度，它會減少並為您命名比率。
16:9 影像寬度為 1280 像素，我需要什麼高度？
寬度乘以 9 並將 16: 1280 × 9 ÷ 16 = 720 除以。 所以 16:9 的圖像 1280 像素寬是 720 像素。 輸入 16:9 預設和 1280 的寬度以確認它。
縱橫比和解析度有什麼差別？
縱橫比是形狀-寬度與高度的比例。解析度是實際的像素數。 1280 × 720 和 1920 × 1080 是具有相同 16:9 縱橫比的不同分辨率,這就是為什麼一個可以縮放到另一個而不失真或裁剪的原因。
我應該使用哪個縱橫比來用於社交媒體？
Instagram 提要貼文使用 1:1 或 4:5,捲軸、故事、TikTok 和 YouTube 短片使用 9:16,標準 YouTube 影片使用 16:9,1.91:1 打開圖 facebook、linkedin 和 X 上的連結預覽圖像。此工具中的預設包括所有這些。
為什麼我的調整大小的圖像看起來很拉伸？
新的寬度和高度與原始比率不匹配,因此影像沿著一個軸被壓扁。使用原始比率從目標寬度計算目標高度,而不是手動輸入兩個數字 - 這正是解決缺失側模式的目的。
21:9 的實際意義是什麼？
它是超寬顯示器的行銷標籤。 3440 × 1440 顯示器的真實比例為 43:18,約 2.39:1,2560 × 1080 面板的真實比例為 64:27。兩者都四捨五入為 "21:9"在產品清單中。如果您需要精確的像素尺寸,請根據真實的面板解析度而不是標籤進行計算。
當結果不是整數時，我如何保持縱橫比？
計算器四捨五入到最接近的整個像素,這最多引入了半像素的漂移 - 實際上是不可見的。視訊編碼器更嚴格:H。264 需要偶數尺寸,因此如果編碼器拒絕您的尺寸,則將奇數側向下舍入一個像素。
這個計算器離線工作嗎？
是的。 每個計算都是在瀏覽器中運行的簡單 JavaScript 算術。 沒有尺寸被傳送到伺服器，沒有記錄任何尺寸，一旦頁面載入，該工具繼續在沒有網路連線的情況下工作。
相關工具
- 圖像調整大小- 在瀏覽器中套用您剛剛計算的尺寸
- 圖像壓縮- 形狀正確後縮小文件
- 百分比計算器- 佔工作比例的一半
- 開啟圖形預覽- 在發送連結之前檢查該 1.91:1 影像
- 格式轉換器- 網路P AVIF 適用於您剛剛調整規模的資產
進一步閱讀: 影像壓縮完整指南 和 Web 的基本影像工具.
