# 差別在哪？`<img>`圖片和背景圖片`background-image`

###### tags: `HTML`, `CSS`

[Codepen 範例展示](https://codepen.io/J_u_d_y/pen/RwewpRa?editors=1100)

## 01 分類不同
`<img>` 是一種HTML的元素，`background-image` 則是一種CSS屬性，

#### 1. 若使用`<img>`顯示圖片
`<img>` 元素沒有結束標籤，圖片載入寫法是直接在標籤內的 `src`屬性中給予圖片路徑。

<img src="https://dictionary.cambridge.org/external/images/logo-lrg.png" alt="">

圖片元素外層常見有父層容器包著

<div class="wrapper">
    <img src="https://dictionary.cambridge.org/external/images/logo-lrg.png" alt="">
</div>

#### 2. 若使用 `background-image` 顯示圖片
通常會先建立一個區塊元素，再針對這個區塊元素設定 `background-image` CSS屬性給予圖片路徑。

<div class="box"></div>

.box{
    background-image: url(https://dictionary.cambridge.org/external/images/logo-lrg.png);
}

## 02 高度設定邏輯不同

- 使用 `<img>` 標籤時，因為圖片來源自帶高度，如果圖片高度比父層容器大，圖片會溢出父層容器。為了避免此情況，通常父層容器不會寫死寬度和高度，而是透過對子層 `<img>` 設定 `max-width: 100%` 讓圖片最大寬度 = 父層寬度，圖片就會以寬度為依據，高度自動等比例縮放。如此一來，圖片本身的高度會自動撐開父層，父層容器就會自適應生出寬高，容納子層圖片。

- 使用 `background-image:url(圖片路徑)` CSS屬性時，如果容器內沒有內容當作前景，例如：在`<div class="box"></div>`標籤之間沒有文字，容器的空間會無法展開，「背景」當然也就無法顯示。這種情況下，必須設有「min-height 最小高度」值，才能撐出容器的高度。

---
### 範例比較
---


## 中場小結論

**使用`<img>`元素**
父層容器會被圖片撐開，所以通常不特別指定`<img>`元素本身高度或是父層容器高度。

**使用`background-image`屬性**
「容器本身」無法被圖片撐開，「容器本身」不會自己長高度，至少要給容器最小高度值 `min-height` ，才能撐出容器空間，讓圖片有空間能夠顯示出來。

## 03 使用`flex`或`inline-block` 排版的差別
`background-image` 屬性的使用重點在於有高度。

### (1) display: flex 的狀況
將圖片和文字並排時，如果用`display: flex`排版，`background-image` 圖片區塊的高度能夠以隔壁文字區塊長出的高度為依據。

但是關鍵是，`flex-direction: row`的狀態下，必須搭配 `align-items:stretch` 才有效。
`flex-start` / `flex-end` / `center` / `baseline` 都沒效。


因為在 `flex-item` 沒有額外設定高度值的狀態下，`align-items:stretch` 會讓 `flex-item` 全體拉長到填滿父層高度。原本沒有高度的圖片區域，此時便能跟隨隔壁文字區域展開的高度，作為高度依據。


> 圖片取自：[卡斯伯'Blog 圖解：CSS Flex 屬性一點也不難](https://www.casper.tw/css/2017/07/21/css-flex/)

--

#### 沒有設定 `min-height` 圖片長不出來

但是要注意，變換為行動版直式排版時，文字流動到圖片下方，此時背景圖片區域若沒有設最小高度，就會因隔壁已經沒有文字區塊可以當作高度依據，背景圖片會撐不出空間，顯示不出來。


--

#### 有設定 `min-height` 圖片才有顯露空間
如果有設定最小高度，則切換為行動版排版時，背景圖片區域就能確保有最小可露出的高度。

.box4{
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/640px-Google_%22G%22_Logo.png);
    background-color: black;
    width: 50%;
    min-height: 200px;
  }

.box4{
    @media screen and (max-width: 991px){ width: 100%; } 
}


### (2) display: inline-block 的狀況
要讓圖片和文字並排，則兩者都要設定 `display: inline-block`。但是若沒有搭配`min-height`，即使右邊有文字區域撐出來的高度，左邊的圖片不僅背景圖片不會顯示，連背景顏色也不會顯示，因為這塊圖片區域完全沒有高度可以展示背景。


.box4{
    display: inline-block;
    vertical-align: top;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/640px-Google_%22G%22_Logo.png);
    background-color: black;
    width: 50%;
  }

.box4{
    @media screen and (max-width: 991px){width: 100%;} 
}
  
p{
    display: inline-block;
  }

總結來說，雖然都是在進行「圖片」的佈局，但一開始就要分清楚現在是用 ``<img>`` 元素還是使用 CSS 屬性 ``background-image``。

而``background-image`` 使用重點就是：記得給「高度」！