CSS3中background-size的問題
問題描述
cover 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。contain 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。
這里面說的最大大小和最小大小該怎么理解呢？為什么我覺得它們好像沒有區(qū)別啊？
問題解答
回答1：寫一段代碼自己驗(yàn)證一下啊：
<!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://m.4tl426be.cn/i/bg_flower.gif'/></p></body></html>
可以看出，盡管cover和contain都保持了縱橫比，但是contain會(huì)把圖片完全包含進(jìn)box，box內(nèi)部有些部分沒有圖片：
而cover則是圖片會(huì)完全覆蓋box，而圖片的有些部分則會(huì)不顯示：
http://segmentfault.com/a/1190000002481921#articleHeader8
據(jù)說這里有答案……
相關(guān)文章：
1. windows誤人子弟啊2. php傳對(duì)應(yīng)的id值為什么傳不了啊有木有大神會(huì)的看我下方截圖3. python - linux 下用wsgifunc 運(yùn)行web.py該如何修改代碼4. python - oslo_config5. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問題6. 實(shí)現(xiàn)bing搜索工具urlAPI提交7. 冒昧問一下，我這php代碼哪里出錯(cuò)了？？？8. mysql優(yōu)化 - MySQL如何為配置表建立索引？9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 數(shù)據(jù)庫 - Mysql的存儲(chǔ)過程真的是個(gè)坑！求助下面的存儲(chǔ)過程哪里錯(cuò)啦，實(shí)在是找不到哪里的問題了。
網(wǎng)公網(wǎng)安備