背景圖片在網頁的用處很廣，但他就是有個毛病，它的尺寸不太好控制，一旦背景的圖片超過了容器的限制，就會直接被截取，讓圖片看起來怪怪的。

實際開發中，設計師給你的圖片難免會有一點誤差，但你的圖片又不能這樣展示，更不可能自己手動修改圖片，所以就必須使用一種方法來讓圖片自動適應容器。

本質上要解決的是每個即使不同尺寸的圖片，都能統一適配同個容器的尺寸。

語法

控制背景圖片尺寸

background-size：類型；

（1）Auto

這是默認值，等於沒有使用這個屬性。超出的部分直接被截掉。

核心代碼：background-size: auto;

核心代碼：background-size: auto

超出部分，被截掉

（2）數值

可以使用px或者%，設置一個就對寬度起作用，設置第二個，則是對高起作用；

如果單是設置一個寬，第二個高就會自動設置，和寬保持等比例。

核心代碼：background-size: 600px;

核心代碼：background-size: 600px;

完整顯示，但空出了下面

當然更便捷的是，兩個都設置100%，就會直接填滿容器，但是這樣會失真。

核心代碼：background-size: 100% 100%;

核心代碼：background-size: 100% 100%;

雖然也能覆蓋容器，但已經變相失真

（3）Contain

官方的解釋是圖片按照背景最短邊進行按比例放大或縮小，其實你只要記住，圖片會完整的展示在容器內，並不會失真。

但這可能會帶來容器內有空餘的地方，這是因為圖片要在不失真的情況下，按等比例完整的在不合尺寸的容器內展示。

核心代碼：background-size: contain;

核心代碼：background-size: contain;

這幅圖片原本是豎著長方形，而容器是橫着長方形，並且圖片實際尺寸是要比容器大得多，但使用了contain，也能在不失真的情況下，完整的展示在不合尺寸的容器里。

能在容器內完整顯示，不變形

（4）Cover（常用）

官方的解釋是圖片按照背景最長邊進行按比例放大或縮小，其實你只要記住，圖片會按容器尺寸等比例覆蓋容器，避免會出現空白的地方，但會截掉一點點超出的部分。

核心代碼：background-size: cover;

核心代碼：background-size: cover;

實際上圖片尺寸是比容器大得多，但使用cover就可以讓圖片尺寸同步容器，超出的部分在裁掉。

完整覆蓋容器

這個是沒使用cover屬性，就只能看到一部分內容。所以在使用背景圖片時，一般都要加上cover屬性，好讓不同圖片能夠適用容器，僅僅只是截掉一點點圖片而已。

背景圖片原尺寸

知識導圖