在網頁布局中引入圖片，最常用的兩個就是 img 標簽和 background 屬性了。但何時使用 img 標簽，何時使用 backround 背景圖像呢？
<img> 標簽定義 HTML 頁面中的圖像。從技術上講，<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。
src 規定顯示圖像的 url ;
alt 規定圖像的替代文本，即當圖片無法顯示時圖片位置會出現的說明性文字。當用戶的網絡條件差、圖片路徑錯誤或者瀏覽器禁用圖像等情況下，用戶瀏覽網頁時是看不到這張圖片的，這時 alt 屬性內的解釋性文字會顯示出來，使得用戶即使看不到圖片，也不會影響到對整個頁面的瀏覽，而且搜索引擎是通過識別 alt 屬性，來辨別本圖片是不是它所要抓取的。
除了這兩個屬性，還有另外兩個對圖片顯示有影響的屬性：
object-fit ：這個屬性決定了像 img 和 video 這樣的替換元素的內容如何適應到其使用的寬高確定的框。object-fit 有5個值：
| 值 | 描述 |
|---|---|
| fill | 默認值。填充，替換元素填滿真個內容區域，可能會改變長寬比，導致拉伸。 |
| contain | 包含，保持原始的尺寸比例，保證替換元素完整顯示，寬高至少有一個和內容區域的寬高一致，會出現空白。 |
| cover | 覆蓋，保持原始的尺寸比例，保證內容區域被填滿。替換元素可能會被切掉一部分，從而不能完整展示 |
| none | 保持原始尺寸比例。 |
| scale-down | 等比縮小。就好像依次設置了 none 和 contain，最終呈現的是尺寸比較小的那個。 |
background-position 屬性取值一樣，表現特性也是一樣，但 background-position 的默認值是0% 0% 。
background 是css的一個樣式，是設置所有背景屬性的簡寫，用於一次性集中定義各種背景屬性, 包括 color, image, origin 與 size, repeat 等等。
| 值 | 描述 |
|---|---|
| border-box | 背景顯示在邊框內。默認值。 |
| padding-box | 背景顯示在內邊距內。不會繪制到邊框處。 |
| content-box | 背景只顯示在內容框內。 |
| text | 背景被裁剪成文字的前景色。 |
background-image）或背景顏色（background-color），那么這個屬性只有在邊框（ border）被設置為非固實（soild）、透明或半透明時才能看到視覺效果（與 border-style 或 border-image 有關），否則，本屬性產生的樣式變化會被邊框覆蓋。
background-image 屬性的原點位置的背景相對區域。此屬性需要與 background-position 配合使用。可以用 background-position計算定位是從 border，padding 還是 content boxes 內容區域算起。（類似background-clip）語法：background-origin: padding-box | border-box | content-box;
| 值 | 描述 |
|---|---|
| padding-box | 背景圖像相對於內邊距框來定位。默認值。 |
| border-box | 以邊框為原點開始計算 background-position |
| content-box | 背景圖像相對於內容框來定位。 |
| 值 | 描述 |
|---|---|
| length | 設置背景圖像的高度和寬度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。保持圖片的長寬比。 背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。保持圖片的長寬比。 |
| auto | 以背景圖片的比例縮放背景圖片。 |
比如有一個元素 img，高度固定，寬度不固定，調整瀏覽器窗口大小的時候要img元素不變形，寬高比不變，直接用 object-fit 與 object-position 就可以了。
總結：
1. <img> 標簽可添加 alt 屬性，能更好的SEO，其語義能被瀏覽器理解，也可以被讀屏軟件識別。一般來說，如果圖片是周圍的文字內容的一部分，比如logo，圖表，人等，那么用img，否則用 background-image ；
2. 是否可打印。當打印網頁的時候，默認會打印 img，而 background-image 的內容則不會，所以這取決於設計網頁的時候希不希望圖片被打印出來；
3. 如果圖片不是內容的一部分，屬於設計版式裝飾性圖片的時候，考慮將 img 改成 background-image；
4. 頁面中的圖片是作為頁面元素內容出現的，比如廣告圖片，產品圖片，那就要用 img 了；
5. 在有明確的語義化要求的情況下選用 img 標簽；
6. <img/>標簽是網頁結構（內容）的一部分會在加載結構的過程中加載，以 css background-image 存在的圖片會等到 dom 結構加載完成（網頁的內容標簽全部顯示以后）才開始加載，既網頁會先加載標簽<img/>的內容，再加載背景圖片 background-image。如果引入了一個很大的圖片，那么在這個圖片下載完成之前，img 后的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容加載完成之后 ，才開始加載背景圖片，就不會影響瀏覽網頁內容，所以 background-image 更加靈活。
7. <img/>標簽加載更快，瀏覽器加載文檔是從上往下的，css 樣式是在 style 標簽內，當瀏覽器加載到 style 標簽的時候，它就會停下，跳過去，繼續加載HTML，HTML加載完成后，才會繼續加載 css 樣式表。假如我們在head的 style 標簽內寫了.div{width:100px;}，這時候瀏覽器並沒有加載到 body，就無法找到 div 並給其設置寬度。所以，如果論加載速度，還是 body 中的 img 標簽加載更快。
8. <img/>標簽是一個dom對象，可以使用js進行元素的操作，比如更換 img src 的路徑可以達到更換圖片的目的，也可以移動它的位置，從document中移除等等操作。background 背景圖片不占位置，是只能看的。