您的位置:首頁/技術文章
文章詳情頁

CSS3中background-size的問題

瀏覽:89日期:2023-07-20 16:29:39

問題描述

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.wxshucaidpc.com/i/bg_flower.gif'/></p></body></html>

可以看出,盡管cover和contain都保持了縱橫比,但是contain會把圖片完全包含進box,box內部有些部分沒有圖片:CSS3中background-size的問題而cover則是圖片會完全覆蓋box,而圖片的有些部分則會不顯示:CSS3中background-size的問題

回答2:

http://segmentfault.com/a/1190000002481921#articleHeader8

據說這里有答案……

標簽: CSS
相關文章:
国产综合久久一区二区三区