CSS3中background-size的問題
問題描述
cover 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。contain 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。
這里面說的最大大小和最小大小該怎么理解呢？為什么我覺得它們好像沒有區別啊？
問題解答
回答1：寫一段代碼自己驗證一下啊：
<!DOCTYPE html><html><head><style> p {width: 200px;height: 200px;}.contain{border: black 1px solid;background:url(/i/bg_flower.gif);background-size:contain;background-repeat:no-repeat;padding:10px;}.cover{border: red 1px solid;background:url(/i/bg_flower.gif);background-size:cover;background-repeat:no-repeat;padding:10px;}</style></head><body><p>contain</p><p class='contain'></p><p>cover</p><p class='cover'></p><p>原始圖片<img src='http://www.lshqa.cn/i/bg_flower.gif'/></p></body></html>
可以看出，盡管cover和contain都保持了縱橫比，但是contain會把圖片完全包含進box，box內部有些部分沒有圖片：
而cover則是圖片會完全覆蓋box，而圖片的有些部分則會不顯示：
http://segmentfault.com/a/1190000002481921#articleHeader8
據說這里有答案……
相關文章：
1. javascript - angular使從elastichearch中取出的文本高亮顯示，如圖所示2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. javascript - 求幫助 , ATOM不顯示界面!!!!4. 視頻文件不能播放，怎么辦？5. javascript - vue2如何獲取v-model變量名6. python - 爬蟲模擬登錄后，爬取csdn后臺文章列表遇到的問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處8. javascript - 為什么在谷歌控制臺 輸出1的時候，輸出的1立馬就不見了9. html5 - HTML代碼中的文字亂碼是怎么回事？10. javascript - ios返回不執行js怎么解決？
網公網安備