我要成為切版魔法師 #2 - 讓圖片乖乖聽話的 3 種方法

圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。

依據不同目的，設定 img 圖片標籤

一、圖片會填滿父容器，但有機會導致父容器有留白

在 img 標籤設定 max-width: 100%，這個語法的意思是：

1. 它會填滿父容器，同時不會超出自己的圖片尺寸、導致模糊
2. 如上面特點，不會超出圖片本身像素，即代表有機會導致圖片沒有填滿父容器、出現留白。發生這種事情時，通常代表的是圖片輸出不夠大張，像素不夠。

有時候​需要強制讓圖片撐滿整個空間，這時候就可以使用第二個方法。

二、讓圖片強制填滿父層、且不變形

在 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">

但這個方法有幾個需要注意的地方：

1. 製作 RWD 較為不便，還是需要進到 CSS 裡面設定，較適合使用在網頁中的小圖示上
2. 經常會導致圖片變形，需要搭配 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 標籤，這部分還蠻多設定的，之後會再寫一篇文章介紹。

希望看完這篇文章，大家都能隨心所欲控制網頁中的圖片囉！