CSS3中background-size的問(wèn)題
問(wèn)題描述
cover 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。contain 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。
這里面說(shuō)的最大大小和最小大小該怎么理解呢？為什么我覺(jué)得它們好像沒(méi)有區(qū)別啊？
問(wèn)題解答
回答1：寫(xiě)一段代碼自己驗(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://www.aoyou183.cn/i/bg_flower.gif'/></p></body></html>
可以看出，盡管cover和contain都保持了縱橫比，但是contain會(huì)把圖片完全包含進(jìn)box，box內(nèi)部有些部分沒(méi)有圖片：
而cover則是圖片會(huì)完全覆蓋box，而圖片的有些部分則會(huì)不顯示：
http://segmentfault.com/a/1190000002481921#articleHeader8
據(jù)說(shuō)這里有答案……
相關(guān)文章：
1. [python2]local variable referenced before assignment問(wèn)題2. thinkPHP5中獲取數(shù)據(jù)庫(kù)數(shù)據(jù)后默認(rèn)選中下拉框的值，傳遞到后臺(tái)消失不見(jiàn)。有圖有代碼，希望有人幫忙3. mysql主從 - 請(qǐng)教下mysql 主動(dòng)-被動(dòng)模式的雙主配置 和 主從配置在應(yīng)用上有什么區(qū)別？4. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過(guò)段時(shí)間會(huì)消失是什么情況？5. linux運(yùn)維 - python遠(yuǎn)程控制windows如何實(shí)現(xiàn)6. python小白，關(guān)于函數(shù)問(wèn)題7. django - Python error: [Errno 99] Cannot assign requested address8. python小白 關(guān)于類里面的方法獲取變量失敗的問(wèn)題9. Python2中code.co_kwonlyargcount的等效寫(xiě)法10. android - 請(qǐng)問(wèn)一下 類似QQ音樂(lè)底部播放 在每個(gè)頁(yè)面都顯示 是怎么做的？
網(wǎng)公網(wǎng)安備