方面適合
使用信箱將影像調整到螢幕上
如何使用方面適合
- 1輸入圖片或影片的原始寬和高。
- 2輸入你想放入的目標框寬和高。
- 3檢視適配後的尺寸、縮放比例，以及是否需要上下或左右黑邊。
什麼是等比適配（aspect-fit）縮放？
縮放比 = min(目標寬/原寬, 目標高/原高)；適配寬 = 原寬 × 縮放比；適配高 = 原高 × 縮放比等比適配會在保持原始比例的前提下，把整個內容縮放到能放入目標框內的最大尺寸。
多出來的空間會形成上下黑邊（letterbox）或左右黑邊（pillarbox）。等比填充（aspect-fill）則相反，會裁切以鋪滿畫面。
「等比適配」（aspect fit / contain）是指**在保持原始寬高比的前提下，把影像完整放進目標框**，結果是目標框內會有留白（letterbox 上下黑邊或 pillarbox 左右黑邊）。與之相對的是「填充」（cover / fill），會放大影像直到鋪滿目標框，超出部分被裁掉。**兩者的選擇取決於：內容完整性重要（用 contain）還是畫面鋪滿重要（用 cover）。**
計算方法：設源寬高為 (w, h)，目標框為 (W, H)，取 **scale = min(W/w, H/h)**（contain）或 **max(W/w, H/h)**（cover）。contain 時結果尺寸 = w×scale × h×scale。以 6000×4000 適配 1920×1080：scale = min(1920/6000, 1080/4000) = min(0.32, 0.27) = 0.27，結果 1620×1080。**CSS 中 object-fit: contain 對應前者，cover 對應後者；background-size 同理。**
| 源尺寸 | 比例 | 適配 1920×1080 | 適配 1080×1920 |
|---|---|---|---|
| 6000 × 4000 | 3:2 | 1620 × 1080 | 1080 × 720 |
| 4000 × 3000 | 4:3 | 1440 × 1080 | 1080 × 810 |
| 3000 × 3000 | 1:1 | 1080 × 1080 | 1080 × 1080 |
| 3840 × 2160 | 16:9 | 1920 × 1080 | 1080 × 608 |
| 1920 × 1080 | 16:9 | 1920 × 1080 | 1080 × 608 |
| 1080 × 1920 | 9:16 | 608 × 1080 | 1080 × 1920 |
| 2048 × 858 | 2.39:1 | 1920 × 804 | 1080 × 452 |
常見解析度的等比縮放對照
常見問題
fit 和 fill 有什麼區別？
fit 保證完整顯示、可能留黑邊；fill 鋪滿畫面但會裁掉溢位部分。
為什麼會出現黑邊？
當源與目標寬高比不同時就會出現黑邊，目的是保持畫面不變形。
等比適配會改變檔案解析度嗎？
不會，它只改變源在目標框中的對映方式，不改變源畫素本身。
contain 和 cover 怎麼選？
**contain（等比適配）**：適合需要看到完整內容的場景——產品圖、圖表、截圖、證件照、證件掃描件。代價是有黑邊。**cover（填充裁切）**：適合背景圖、頭圖、影片封面——任何「裁掉一點沒關係但不能有黑邊」的場景。折中方案是 **cover + 指定焦點**（CSS 的 object-position，如 object-position: center 30% 讓人臉在上方時不被裁掉）。**電商產品圖務必用 contain**，裁掉商品一角會直接影響轉化。
為什麼影片上傳到平臺後有黑邊？
因為影片比例與播放器比例不一致。豎屏影片（9:16）在橫屏播放器（16:9）裡必然有左右黑邊；反過來也有。解決辦法：① **按目標平臺拍攝**（抖音/Reels 拍豎屏，YouTube 拍橫屏）；② **如果需要多平臺釋出**，拍攝時用「安全區構圖」——主體放在中間 60% 區域，兩邊留可裁切餘量；③ 有些人會用模糊背景填充黑邊（把影片放大模糊後作為背景），效果比純黑好。**注意平臺有時會提供「填充」選項，那實際是裁切而非加黑邊。**