前言
以前處理響應式圖片比例時，我一直都是用 Padding Hack 這個老方法——h-0 搭配 pb-[33.33%] 之類的寫法。雖然能用，但每次都要換算百分比，說實話有點麻煩。
前陣子偶然發現 CSS 有個 aspect-ratio 屬性，試了一下發現語法簡潔很多，直接寫 aspect-[3/1] 就好，不用再手動算百分比了。心想：「這麼方便的東西怎麼現在才知道！」於是開始把專案裡的比例控制都改成這個寫法。
結果用沒多久就踩坑了——明明設定了 aspect-ratio: 3/1，圖片卻不聽話，硬是撐出了奇怪的高度。
原本預期容器高度應該是 160px（寬度 480px × 1/3），結果實際渲染出來卻是 252px。這個「多出來」的高度看起來不像隨機數字，仔細一算——嘿，這不就是圖片原始比例（接近 2:1）算出來的高度嗎？
經過一番研究，我才發現這不是 bug，而是 aspect-ratio 和 Padding Hack 在「維持比例」這件事上有根本性的差異。這篇文章就來記錄一下這兩種方法的運作原理和適用場景。
問題重現
讓我們先看看原本的寫法：
<!-- 原本的寫法：使用 Modern CSS aspect-ratio --><div class="relative w-full aspect-[3/1]"> <img src="cover.jpg" class="w-full h-full object-cover"></div>這段程式碼看起來沒問題對吧？設定容器為 3:1 比例，圖片填滿整個容器並用 object-cover 裁切。但實際執行時，圖片卻我行我素地把容器撐開了。
方法一：Modern CSS aspect-ratio
運作原理
<div class="relative w-full aspect-[3/1]"> <img class="w-full h-full object-cover"></div>aspect-ratio 是 CSS 的現代屬性，它告訴瀏覽器：「請嘗試保持這個比例」。
關鍵字是「嘗試」。
為什麼會失效？
這種寫法依賴瀏覽器原生的 aspect-ratio 屬性，但它有一個致命弱點：它是彈性的。
當容器內部有具備「原始尺寸（Intrinsic Size）」的內容物時，瀏覽器會進行權重判斷。如果它認為內容物的原始尺寸比你設定的比例「更重要」，容器就會被撐開。
在我的案例中：
- 設定的比例：3:1（預期高度 160px）
- 圖片原始比例：約 2:1
- 實際渲染高度：252px（被圖片撐開）
圖片非常「強勢」地以自己的原始比例為準，直接無視了我們設定的 aspect-ratio。
可能失效的情況
- 圖片原始尺寸強勢：圖片的 intrinsic size 覆蓋了容器設定
- CSS 權重問題：其他樣式覆蓋了 aspect-ratio
- Tailwind 編譯異常：JIT 模式下的 class 沒有正確產生
- 瀏覽器相容性：舊版瀏覽器不支援此屬性
方法二：Classic Padding Hack
運作原理
<div class="relative w-full h-0 pb-[33.33%]"> <img class="absolute top-0 left-0 w-full h-full object-cover"></div>這是行之有年的「Padding Hack」技巧，透過 CSS 的幾何特性強制創造出固定比例的空間。
逐步拆解
Step 1: h-0（height: 0）
首先，把容器的內容高度直接砍成 0。這一步非常關鍵——不給任何東西有機會撐開容器。
Step 2: pb-[33.33%]（padding-bottom: 33.33%）
這裡運用了 CSS 的一個重要規則：
margin和padding的百分比值，是相對於「父容器的寬度」計算的。
所以 33.33% 的 padding-bottom 就等於：
容器寬度 × 33.33% = 容器寬度 × 1/3這就硬生生地創造出了 3:1 的空間（寬度 : 高度 = 3 : 1）。
Step 3: absolute（絕對定位）
圖片被設為絕對定位後，就脫離了文檔流（Document Flow）。
這代表：
- 圖片喪失了撐開父容器的能力
- 它只能乖乖填滿那個由 padding 撐出來的空間
- 不管圖片原本是 1:1 還是 10:1，都無法影響容器高度
常見比例的 Padding 值
| 比例 | padding-bottom | 說明 |
|---|---|---|
| 16:9 | 56.25% | 影片標準比例 |
| 4:3 | 75% | 傳統螢幕比例 |
| 3:2 | 66.67% | 常見相機比例 |
| 3:1 | 33.33% | 寬幅橫幅 |
| 2:1 | 50% | 寬螢幕 |
| 1:1 | 100% | 正方形 |
完整比較
| 特性 | aspect-ratio | Padding Hack |
|---|---|---|
| 強制力 | 彈性建議 | 物理強制 |
| 語法簡潔度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 瀏覽器支援 | 較新 (2021+) | 所有瀏覽器 |
| 內容影響 | 可能被撐開 | 完全隔離 |
| 可讀性 | 直觀 | 需理解原理 |
| 使用場景 | 一般情況 | 需要絕對保證時 |
什麼時候該用哪種方法？
優先使用 aspect-ratio 的情況
- 內容物可控：你能確保圖片不會「造反」
- 現代瀏覽器環境：不需要支援 IE 或極舊版瀏覽器
- 簡潔優先：追求程式碼可讀性
- 靈活佈局：希望容器能根據內容適度調整
<!-- 簡單場景，aspect-ratio 足夠 --><div class="aspect-video"> <iframe src="..."></iframe></div>使用 Padding Hack 的情況
- 比例必須絕對精確：設計稿有嚴格要求
- 圖片來源不可控：使用者上傳、第三方 CDN
- 跨瀏覽器相容：需要支援舊版瀏覽器
- 容器被撐開的問題：
aspect-ratio已經失效
<!-- 嚴格場景，Padding Hack 保證 --><div class="relative w-full h-0 pb-[56.25%]"> <img class="absolute inset-0 w-full h-full object-cover"></div>Tailwind CSS 實作範例
使用 aspect-ratio（簡單情況）
<!-- Tailwind 內建的 aspect 類別 --><div class="aspect-video">...</div><div class="aspect-square">...</div>
<!-- 自定義比例 --><div class="aspect-[3/1]">...</div><div class="aspect-[4/3]">...</div>使用 Padding Hack（嚴格情況）
<!-- 3:1 比例 --><div class="relative w-full h-0 pb-[33.33%]"> <img class="absolute top-0 left-0 w-full h-full object-cover" src="..."></div>
<!-- 16:9 比例 --><div class="relative w-full h-0 pb-[56.25%]"> <img class="absolute inset-0 w-full h-full object-cover" src="..."></div>
<!-- 1:1 正方形 --><div class="relative w-full h-0 pb-[100%]"> <img class="absolute inset-0 w-full h-full object-cover" src="..."></div>實際案例：卡片封面圖
假設我們要做一個部落格卡片，封面圖需要嚴格維持 3:1 比例：
<article class="card rounded-lg overflow-hidden shadow-md"> <!-- 封面圖區域：使用 Padding Hack 確保 3:1 --> <div class="relative w-full h-0 pb-[33.33%]"> <img class="absolute top-0 left-0 w-full h-full object-cover" src="/images/cover.jpg" alt="文章封面" > </div>
<!-- 內容區域 --> <div class="p-4"> <h2 class="text-xl font-bold">文章標題</h2> <p class="text-gray-600">文章摘要...</p> </div></article>這樣不管使用者上傳什麼比例的圖片，封面區域都會穩穩地維持 3:1。
結論
| 方法 | 本質 |
|---|---|
aspect-ratio | 是「建議」瀏覽器用某個比例，但容易被內容物反客為主 |
| Padding Hack | 是「命令」瀏覽器用某個比例，透過幾何計算徹底剝奪內容物改變高度的權利 |
這就是為什麼改用 Padding Hack 後，比例就瞬間「對了」。當你需要處理響應式圖片，且比例必須絕對精確時，Padding Hack 就是那個最穩健的「核彈級」解法。
下次當你的 aspect-ratio 不聽話時，不妨試試這個老派但可靠的技巧！
參考來源：
回報錯字、失效連結，或告訴我你想看的延伸主題。