情境

我們先前也提到一些圖片處理的相關防禦性 CSS，例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候，防止圖片的比例變形。

由於行動網路以及行動裝置的普及，在不同尺寸的裝置上面瀏覽網頁也已經成為了現代人的日常。

除了我們要在意圖片不要在不同比例的容器當中變形之外，我們也要確保他能夠在不同尺寸的裝置上面正常的呈現，今天我們要來討論這相關的案例。

你能看見多遠的未來呢？

我們在處理圖片的時候，他的長度、寬度、長寬比例，是很重要的重點。
以下圖為例，圖片有他自己原本的長寬，也有他被渲染在畫面上的長寬：

所以，當我們不指定圖片的長寬時，他會按照圖片原本的尺寸渲染出來。若圖片的尺寸是 1440x960，若我們的視窗不足這個尺寸時，圖片就會超出畫面：

<img class="item__image" src="bird.png" />

就算我們在圖片外面放一個外容器，並指定外容器的長寬，想說這樣可以限制圖片的範圍，但這樣的想法果然是太天真，效果會跟上圖一模一樣：

.container {
  width: 600px;
  height: 400px;
}

<div class="container">
  <img class="item__image" src="bird.png" />
</div>

那接下來我們就會想，那我們就指定圖片的長寬吧：

<img class="item__image" src="bird.png" width="600" height="400" />

確實，這樣圖片的寬度就被我們改變了，非常棒！
但是，我們想遠一點，現代的網頁如果沒有響應式的設計，就會很遜。可是問題是，我們都已經把圖片的長、寬寫死了，遇到窄螢幕的裝置，必定會回到上面圖片超出視窗範圍的問題：

那我們有沒有辦法讓圖片隨著容器縮放大小呢？
其實答案是有的，我們只要對圖片加上下面的 CSS 就可以了：

.item__image {
  max-width: 100%;
}

最後一提，假設這種圖片縮放的效果是我們希望達到的預設效果，並且我們總是希望圖片能夠 object-fit: cover;，就是在能夠維持原本圖片比例的前提下，填滿容器的長寬。那我們不如就把他寫在全域的設定吧！

img {
  max-width: 100%;
  object-fit: cover;
}

如果這是我們想要達到的效果，但是卻要一張一張圖片各別去設定，那我們真的很容易在一些小地方不小心漏掉了，並且如果一張一張要做同樣的設定，那相信我們的專案裡面必定會有許多類似這樣重複的程式碼。

因此，把他拉出來統一設定，一方面能夠減少我們不小心會漏掉的疏失，另一方面，也能夠減少專案當中重複的程式碼。

小結

在今天的主圖當中，我們介紹了 img 常會遇到的情境，在長度、寬度、圖片比例，會是在使用圖片的時候相當重要的重點。在行動裝置普及的現代，大家對響應式設計是相當的重視，因此我們提醒了圖片在響應式設計中需要特別留意的小細節，並且如果這些設定會成為我們全站的預設效果，那我們就大膽把他拉出來放在全域，對所有的圖片作設定吧！