CSS3中background-size的問題
問題描述
cover 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。contain 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。
這里面說的最大大小和最小大小該怎么理解呢？為什么我覺得它們好像沒有區別??？
問題解答
回答1：寫一段代碼自己驗證一下?。?/p>
<!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.cgvv.com.cn/i/bg_flower.gif'/></p></body></html>
可以看出，盡管cover和contain都保持了縱橫比，但是contain會把圖片完全包含進box，box內部有些部分沒有圖片：
而cover則是圖片會完全覆蓋box，而圖片的有些部分則會不顯示：
http://segmentfault.com/a/1190000002481921#articleHeader8
據說這里有答案……
相關文章：
1. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實現存在即更新應該使用哪個標簽?2. mysql - 數據庫建字段，默認值空和empty string有什么區別 1103. mysql - 這種分級一對多，且分級不平衡的模型該怎么設計表？4. Navicat for mysql 中以json格式儲存的數據存在大量反斜杠，如何去除？5. mac OSX10.12.4 (16E195)下Mysql 5.7.18找不到配置文件my.cnf6. mysql mysql_real_escape_string() 轉義問題7. 新人求教MySQL關于判斷后拼接條件進行查詢的sql語句8. mysql - 千萬數據 分頁，當偏移量 原來越大時，怎么優化速度9. MySQL FOREIGN KEY 約束報錯10. mysql - 數據庫表中，兩個表互為外鍵參考如何解決
網公網安備