CSS3中background-size的問題
問題描述
cover 此時(shí)會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。contain 此時(shí)會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(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.lshqa.cn/i/bg_flower.gif'/></p></body></html>
可以看出,盡管cover和contain都保持了縱橫比,但是contain會把圖片完全包含進(jìn)box,box內(nèi)部有些部分沒有圖片:而cover則是圖片會完全覆蓋box,而圖片的有些部分則會不顯示:
http://segmentfault.com/a/1190000002481921#articleHeader8
據(jù)說這里有答案……
相關(guān)文章:
1. php怎么連接數(shù)據(jù)庫2. 在視圖里面寫php原生標(biāo)簽不是要迫不得已的情況才寫嗎3. fetch_field_direct()報(bào)錯(cuò)4. 為什么點(diǎn)擊登陸沒反應(yīng)5. 多種方式登陸的的用戶數(shù)據(jù)表設(shè)計(jì)6. 獲取上次登錄ip的原理是啥?7. phpstudy v8打開數(shù)據(jù)庫就出錯(cuò),而phpstudy 2018不會8. 為什么說非對象調(diào)用成員函數(shù)fetch()9. 點(diǎn)擊頁面就自動輸入到mysql.求解10. 請問下tp6框架的緩存在哪里設(shè)置,或者說關(guān)閉?
