wxh cover vs. contain

If just use (wide w/o max-) width:100%; max-height:100%; object-fit: 2 co.._types, how infl. 黑邊vs.裁多餘邊緣?
好問題！需要考慮兩個面向：
**`width:100%`（無最大值）+ `max-height:100%`** 表示：始終拉伸至容器寬度，但高度永遠不會超過容器高度。因此，在橫屏上，垂直屏圖片會鋪滿整個寬度，但頂部和底部會留有黑邊。橫屏上，橫屏圖片會完美填滿整個螢幕。
---
**然後，`object-fit` 決定了容器內部的顯示方式：**
**`contain`** — 圖片會縮小以完全填滿容器，並保持寬高比。由於它不會裁剪任何像素，因此總是會在某個位置出現黑邊（信箱/柱狀黑邊）。這種方式安全，但永遠無法真正「填充」。
**`cover`** — 圖片會放大直到覆蓋整個容器，然後裁切掉超出部分。這種方式不會出現黑邊，但會遺失邊緣資訊。裁剪的程度取決於圖像比例與盒子比例的差異——例如，在 16:9 的盒子中，正方形圖像會損失頂部和底部的三分之一。
---
**所以，你的 `width:100% + max-height:100%` 組合：**
使用 `contain`時－如果影像寬度小於螢幕，則兩側會出現黑邊；如果影像高度大於螢幕，則頂部和底部會出現黑邊。非常安全。
使用 `cover` 時－由於 `width` 已強制設定為 100%，影像的寬度至少與螢幕寬度相同。 `cover` 只需要在圖像高度超過 `max-height:100%` 的容納範圍時才需要進行垂直裁剪——而這種情況實際上不會發生，因為 `max-height:100%` 已經限制了圖像的高度。因此，實際上，`cover` 的組合**行為幾乎與 `contain` 完全相同**——既能保證不裁剪，又能始終填充寬度。細微差別：使用 `contain` 時，超寬全景圖仍然會有上下黑邊，而使用 `cover` 則會將其放大以填充高度，並裁剪兩側。
---
**簡短版本：**
- 想要**不裁剪，接受黑邊** → `contain`
- 想要**不黑邊，接受裁剪** → `cover`
- `width:100% + max-height:100%` 可以弱化兩者之間的差異——它已經強制使用全寬，因此 `cover` 只需要垂直裁剪，無需水平裁剪。
Great question! Two axes to think about:
**`width:100%` (no max) + `max-height:100%`** means: always stretch to full width, but never exceed the container's height. So a portrait image on a landscape screen will be full-width but leave black bars top/bottom. A landscape image on a landscape screen fills nicely.
---
**Then `object-fit` decides what happens *inside* that box:**
**`contain`** — the image shrinks to fit entirely inside the box, preserving ratio. You *always* get letterbox/pillarbox black bars somewhere, because it refuses to crop a single pixel. Safe, but never truly "fills".
**`cover`** — the image scales up until it covers the *entire* box, then crops whatever sticks out. No black bars ever, but you lose the edges. How much gets cropped depends on how different the image ratio is from the box ratio — a square image in a 16:9 box loses the top and bottom thirds.
---
**So your combo `width:100% + max-height:100%`:**
With `contain` — black bars on the sides if the image is narrower than the screen, black bars top/bottom if taller. Very safe.
With `cover` — since `width` is already forced to 100%, the image is already at least as wide as the screen. `cover` then only needs to crop vertically if the image is too tall for `max-height:100%` to contain it — which actually can't happen because `max-height:100%` caps it. So in practice this combo with `cover` **behaves almost identically to `contain`** — you get the safety of no-crop but the width always fills. The subtle difference: a very wide panoramic image would still have top/bottom bars with `contain`, but `cover` would zoom it in to fill height, cropping the sides.
---
**Short version:**
- Want **no crop, accept black bars** → `contain`
- Want **no black bars, accept crop** → `cover`
- `width:100% + max-height:100%` softens the difference between them — it already forces full width, so `cover` only ever needs to crop vertically, not horizontally.
坛主:lkkl于2026_05_12 4:33:41编辑