background-size的 contain和 cover是怎麼用的，大家應該都明白。但是裡面也有一些有趣的數學關係。
基本概念
上面就是我們對於 rimage (圖片寬高比)、rviewport (容器寬高比) 的定義。
將圖片放進容器
三種方法
- stretch : 把圖片的寬高強行設定為容器的寬高
注: h’image、w’image、r’image分別為圖片改變後的高、寬、寬高比。之後文章這些名詞也是這個意思，不再解釋。
stretch的方式可想而知後果:
那麼保持怎樣的數學關係才能保證圖片放進容器之後不會變形呢？ 答案也是明顯的:
r’image = rimage
接下來介紹的兩種方法就是不會變形的，也就是說能夠上面的公式對於它們來說是已知條件。
- contain : 讓圖片適應容器，我們把它“裝”進容器，同時也會留下空白。就像我們看電影時的”黑邊”。
對於contain方法來說，也只有圖片放進容器後的高度( h’image )是未知的，我們來算一下：
如果不知道contain為什麼是這樣的建議先看看
background-size
- cover : 也可以讓圖片“遮”住容器。
和contain對應，cover方法要來算一下 w’image
寬高比的影響
不知道大家注意到沒有，剛才我們推導contain的 h’image 和cover的 w’image 時使用的圖片的寬高比總是大於容器的寬高比。
這導致了什麼？導致了我們推導時使用的 條件3 是不一定正確的。 額，這麼說我也有點暈，看圖：
可以看到，我們只考慮了 rimage > rviewport的情況。
結論
我們考慮rimage < rviewport後加完整了，圖片放進容器之後的寬、高如下：
這樣我們就求到了圖片在應用background-size屬性之後在容器中實際的寬、高。
比例 hidden
現在討論圖片放進容器後的圖片與容器的比例關係hidden，這樣我們就可以以此關係讓圖片隨著容器的變化而變化。 注意，hidden是一個小於1的比例，至於為什麼要這樣設定後面有解釋。
以contain佈局為例，rimage > rviewport :
而以cover佈局為例，rimage > rviewport :
以此類推，得到所有情況的 hidden
這樣可以看到四種可能性，但是別忘了我們在上面可是推導過 w’image 、h’image 。
所以hidden最終的結果是：
可以看出來，hidden就只有兩種結果，rimage / rviewport 或 r viewport / rimage，而且這個數是小於1的(這是上面就確定的)。
所以，hidden的計算可以簡化為:
後記
你可能想，搞了半天，這到底能幹嗎？直接用background-size不就好了，為什麼還要得到具體的寬、高，得到了伸縮比又能怎麼樣。 我也想了想，如果只是圖片，似乎上面都是廢話。但如果是DOM呢？這是不是就是一種佈局方式？
我也不知道，知識有時候就是這樣。當你需要用到的時候，你才覺得有用。
參考文章
我的部落格，歡迎訂閱
微博粉絲太少，求粉