.jpg)
background-size: cover 和 contain 的核心區(qū)別在于圖片適應(yīng)容器的方式。cover 會(huì)等比縮放圖片以覆蓋整個(gè)容器，可能裁剪圖片；而 contain 會(huì)等比縮放以完整顯示圖片，可能留白。1. cover 常用于全屏背景、卡片封面等需要視覺(jué)沖擊的場(chǎng)景，優(yōu)點(diǎn)是填滿容器，缺點(diǎn)是可能裁剪關(guān)鍵內(nèi)容。2. contain 適用于 logo、圖標(biāo)等不可裁剪的場(chǎng)景，優(yōu)點(diǎn)是完整展示圖片，缺點(diǎn)是可能出現(xiàn)空白。選擇時(shí)根據(jù)內(nèi)容優(yōu)先級(jí)和視覺(jué)需求決定：若需填滿且可裁剪，用 cover；若需完整顯示且可接受留白，用 contain。此外，cover 在移動(dòng)端更常用，contain 在卡片組件中更安全，搭配 background-position 可優(yōu)化展示效果。
在css中，background-size: cover 和 contain 是兩種常見(jiàn)的背景圖縮放方式，它們的核心區(qū)別在于如何調(diào)整圖片以適應(yīng)容器。簡(jiǎn)單來(lái)說(shuō)：
- cover 會(huì)把背景圖等比例放大或縮小，直到完全覆蓋整個(gè)容器，可能會(huì)裁剪圖片；
- contain 會(huì)等比縮放圖片，確保整張圖都顯示出來(lái)，可能會(huì)留白。
下面從具體使用場(chǎng)景出發(fā)，詳細(xì)說(shuō)明它們的差異和適用情況。
cover：填滿容器，可能裁剪圖片
使用 background-size: cover 時(shí)，瀏覽器會(huì)根據(jù)容器的大小，保持圖片寬高比進(jìn)行縮放，使圖片剛好覆蓋整個(gè)容器區(qū)域。如果圖片的比例與容器不一致，超出部分會(huì)被裁剪。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
常見(jiàn)用途包括：
- 全屏背景圖
- 卡片式設(shè)計(jì)中的封面圖
- 需要視覺(jué)沖擊力強(qiáng)、允許裁剪的展示場(chǎng)景
舉個(gè)例子，一個(gè)16:9的圖片放在4:3的容器里，用 cover 的話，圖片寬度會(huì)被拉伸到撐滿容器，上下部分就會(huì)被裁掉。
.container { background-size: cover; }
優(yōu)點(diǎn)：
- 圖片始終填滿容器，視覺(jué)上更飽滿
- 適合不確定容器尺寸的響應(yīng)式布局
缺點(diǎn)：
- 圖片內(nèi)容可能被裁剪，關(guān)鍵元素可能顯示不全
contain：完整顯示圖片，可能留下空白
background-size: contain 會(huì)將圖片按比例縮放，確保整張圖都能顯示在容器內(nèi)。如果容器和圖片比例不同，就會(huì)出現(xiàn)空白區(qū)域（比如左右或上下留白）。
適用于：
- 需要完整展示圖片內(nèi)容的場(chǎng)景
- Logo、圖標(biāo)等不能裁剪的關(guān)鍵圖像
- 容器比例和圖片接近的情況下
例如，一張豎版照片放在橫版容器里，用 contain 會(huì)自動(dòng)縮小圖片，使其完全顯示，但左右兩邊會(huì)有空白。
.container { background-size: contain; }
優(yōu)點(diǎn)：
- 圖片內(nèi)容不會(huì)被裁剪
- 更容易控制圖片展示范圍
缺點(diǎn)：
- 可能導(dǎo)致頁(yè)面出現(xiàn)空白區(qū)域，影響整體視覺(jué)效果
如何選擇cover還是contain？
選哪個(gè)主要看你的內(nèi)容優(yōu)先級(jí)和視覺(jué)需求：
- 如果你希望背景圖充滿整個(gè)區(qū)域，并且可以接受部分內(nèi)容被裁剪，就用 cover。
- 如果你必須顯示整張圖片，不允許裁剪，而且可以接受周圍有空隙，就用 contain。
一些小建議：
- 在移動(dòng)端，cover 更常用，因?yàn)槠聊怀叽缍嘧儯枰曈X(jué)填充。
- 在卡片類組件中，contain 更安全，避免重要內(nèi)容被裁掉。
- 搭配 background-position 使用，可以更好地控制裁剪區(qū)域。
總的來(lái)說(shuō)，cover 和 contain 各有優(yōu)劣，理解它們的行為邏輯后，就能根據(jù)實(shí)際需求靈活選用。基本上就這些，不復(fù)雜但容易忽略細(xì)節(jié)。
.png)
