本文轉自奇舞周刊學習使用侵權刪
先來看個例子，熱熱身。
上面這張圖像的原始尺寸是：寬 54px 高 49px。
那么，在以下代碼中，每張圖像顯示的最終尺寸是多少？
https://p1.ssl.qhimg.com/t01068da1826ad05875.png 是該圖片的 url
圖像由<img src="">指定，代碼如下：
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png">
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30" height="30">
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30">
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" height="30">
顯示的尺寸依次是...
-
寬 54px，高 49px
-
寬 30px，高 30px
-
寬 30px，高 30/(54/49)=27.22px
-
寬 30*(54/49)=33.06px，高 30px
圖像由background-image指定，代碼如下：
<style>
.img {
display: inline-block;
background-color: #eee;
background-image: url('https://p1.ssl.qhimg.com/t01068da1826ad05875.png');
background-repeat: no-repeat;
background-size: auto; /*auto 是默認值*/
}
</style>
<span class="img" style="width: 100px; height: 100px;"></span>
<span class="img" style="width: 30px; height: 30px;"></span>
<span class="img" style="width: 30px; height: 30px; background-size: 10px 10px;"></span>
<span class="img" style="width: 30px; height: 30px; background-size: contain;"></span>
<span class="img" style="width: 100px; height: 100px; background-size: cover;"></span>
顯示的尺寸依次是...
-
寬 54px，高 49px
-
寬 54px，高 49px
-
寬 10px，高 10px
-
寬 30px，高 27.22px
-
寬 100px，高 100px
以上 9 道題，你都答對了嗎？
確定圖像大小的過程
為了方便討論，我們先來認識四個術語：
-
固有尺寸：是固有寬度、固有高度和固有寬高比的集合。對於特定對象，這三個尺寸可能都存在，也可能都不存在。比如光柵圖像同時擁有這三個，SVG 圖像只有固有寬高比，CSS 漸變就沒有任何固有尺寸。
-
指定大小：是通過width height background-size中的一個或多個指定的。
-
默認對象大小：是一個具有確定寬高的矩形。在既沒有固有尺寸，也沒有指定大小時生效。
-
具體對象大小：是對象最終顯示的大小，即有明確寬度和高度值的矩形。
通常情況，計算圖像大小的默認過程是：
-
優先使用指定大小，得到要顯示的寬和高
-
如果只指定了一個寬度，或只指定了一個高度，那么
2.1 如果有固有寬高比，則用它和給出的那個，計算出來另一個
2.2 否則，就取固有尺寸里的
2.3 如果也沒有固有尺寸，那就取默認對象大小的
-
如果沒有指定大小
3.1 先用固有尺寸里的
3.2 如果沒有固有尺寸，那就取默認對象大小的
初聽起來有些繞，我們用剛才提到的例子具象下這個過程。
光柵圖像是有三個固有尺寸的。以開頭給出的 Logo 圖像為例，它的固有尺寸分別是：
-
固有寬度 54px
-
固有高度 49px
-
固有寬高比 54/49
<img>
我們先來看用<img src="">指定的那四個：
demo1.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png">
沒有指定大小，那就用固有尺寸。所以，最終顯示的尺寸是寬 54px，高 49px。
demo2.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30" height="30">
有指定的寬和高，所以，最終顯示的尺寸是寬 30px，高 30px。
demo3.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30">
只有一個指定的寬，那就用固有寬高比計算出高來。所以，最終顯示的尺寸是寬 30px，高 30/(54/49)=27.22px。
demo4.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" height="30">
只有一個指定的高，那就用固有寬高比計算出寬來。所以，最終顯示的尺寸是寬 30*(54/49)=33.06px，高 30px。
以上四個示例的 UI 依次是：
background-image
接下來，看用background-image指定的五個。
在這個上下文里，背景區域的大小即圖像的默認對象大小，background-size屬性提供指定大小。
background-size有兩個關鍵字contain和cover，它們分別對應包含約束和覆蓋約束。
-
包含約束（contain constraint ）遵循固有寬高比，寬高都小於等於背景區域，然后盡可能的大。
-
覆蓋約束（cover constraint）遵循固有寬高比，寬高都大於等於背景區域，然后盡可能的小。
demo1.
<span class="img" style="width: 100px; height: 100px;"></span>
auto是background-size的默認值，意思是按圖像的固有尺寸來，所以最終顯示的尺寸是寬 54px，高 49px。
demo2.
<span class="img" style="width: 30px; height: 30px;"></span>
同上，auto按圖像的固有尺寸來，所以最終顯示的尺寸是寬 54px，高 49px。
demo3.
<span class="img" style="width: 30px; height: 30px; background-size: 10px 10px;"></span>
這里background-size: 10px 10px給出了具體的指定大小，所以最終顯示顯示的尺寸就是寬 10px，高 10px。
demo4.
<span class="img" style="width: 30px; height: 30px; background-size: contain;"></span>
根據contain的含義，包含約束要在背景框里盡可能的大。背景框寬 30px 高 30px，圖像固有寬 54px 固有高 49px，所以包含約束取寬 30px，高根據固有寬高比算出來 30/(54/49)=27.22px，也就是指定大小是寬 30px 高 27.22px。對於背景區域未覆蓋到的地方將會用背景色來填充。所以最終顯示的尺寸是寬 30px 高 27.22px。
demo5.
<span class="img" style="width: 100px; height: 100px; background-size: cover;"></span>
根據cover的含義，覆蓋約束要在大於等於背景框的前提下盡可能的小。背景框寬 100px 高 100px，圖像固有寬 54px 固有高 49px，所以覆蓋約束取高 100px，寬根據固有寬高比算出來 100*(54/49)=110.20px，也就是指定大小是寬 110.20px 高 100px。 對於超出背景區域的部分，會被裁切掉，所以最終顯示的尺寸是寬 100px 高 100px。
以上五個示例的 UI 依次是：
總結
-
理解四個尺寸
-
固有尺寸：固有寬度、固有高度、固有寬高比
-
指定大小：width height background-size
-
默認對象大小：依據不同的上下文而定
-
具體對象大小：它就是最終要顯示的大小
-
計算圖像大小的過程，即算圖像最終要顯示的大小，也就是算它最終的“具體對象大小”
-
根據固有尺寸 + 指定大小 + 默認對象大小，計算具體對象大小
-
使用的優先級：指定大小 > 固有尺寸 > 默認對象大小
-
兩種比較常見的指定大小約束：包含約束、覆蓋約束
-
當計算出的“具體對象大小”和圖像的“固有尺寸”不一致時，圖像就要調整自身，以匹配“具體對象大小”
-
圖像超出背景區域的部分，會被裁剪掉；覆蓋不全的部分，會用背景色來填充
-
當是<img>時，也有個相應的屬性可以調整圖像大小，即 object-fit
-
調整圖像大小的屬性background-size