圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。
依據不同目的，設定 img 圖片標籤
一、圖片會填滿父容器，但有機會導致父容器有留白
在 img 標籤設定 max-width: 100%，這個語法的意思是：
- 它會填滿父容器，同時不會超出自己的圖片尺寸、導致模糊
- 如上面特點，不會超出圖片本身像素，即代表有機會導致圖片沒有填滿父容器、出現留白。發生這種事情時，通常代表的是圖片輸出不夠大張，像素不夠。
二、讓圖片強制填滿父層、且不變形
在 img 標籤設定 width: 100% 和 object-fit: cover：
width: 100%：讓圖片完全填滿父容器。object-fit: cover：圖片會填滿父容器，但不會變形。- 有時候會搭配
object-position語法調整圖片位置（要顯示圖片的哪個部分）。
需要注意的是，如果圖片有設定 max-width: 100%，那麼 object-fit: cover 就不會有作用囉，因為前者的語法已經將圖片設定成不會超出本身的尺寸了。
三、在 HTML 文件中將 img 設定基本寬高
透過 img 標籤的屬性 width 和 height 設定圖片寬高，因為並不是設定在 style 裡面，所以不會有 CSS 權重的問題
<img width="40px" height="40px" alt="logo">
但這個方法有幾個需要注意的地方：
- 製作 RWD 較為不便，還是需要進到 CSS 裡面設定，較適合使用在網頁中的小圖示上
- 經常會導致圖片變形，需要搭配
object-fit: cover語法
我自己的經驗是，圖片大多會先採用第一種寫法，若有特殊需求就會再額外設定第二種寫法，然後在小圖示上斟酌使用第三種寫法。
額外討論1：background-image 與 img 的使用情況
通常會將網頁中有意義的圖片使用 img 標籤表示，因為這時才有語意化的含義，而裝飾元素就會使用 CSS 語法 background-image 放入網頁中。
background-image 相關屬性有：
background-image：引入圖片路徑background-position：指定圖片位置（想顯示圖片哪個部分）background-size：指定圖片尺寸background-repeat：預設值為repeat，若要圖片不再重複出現要設定no-repeat
若使用這個方法，因為這個放置圖片的方式是依附在元素上，本身無法撐出寬高，需要在元素額外設定寬高，圖片才會正常顯示。
background-image 的好處是製作 RWD 很方便，有時候圖片變化較大，需要額外替換圖檔，這時候直接使用 media query 和改變 background-image 圖片路徑即可，只是這樣就沒有像 img 標籤有語意化的效果了。
額外討論2：如果要使用 img 標籤達到 RWD 效果呢？
可以搭配 picture 和 source 標籤，這部分還蠻多設定的，之後會再寫一篇文章介紹。
希望看完這篇文章，大家都能隨心所欲控制網頁中的圖片囉！
