html+css 圖片自適應


background-size:cover | cotain 背景圖

object-fill: fill/ contain / cover / none / scale-down 

  • fill 默認值。內容拉伸填滿整個content box, 不保證保持原有的比例。
  • contain: 保持原有尺寸比例。長度和高度中短的那條邊跟容器大小一致,長的那條等比縮放,可能會有留白。
  • cover: 保持原有尺寸比例。寬度和高度中長的那條邊跟容器大小一致,短的那條等比縮放。可能會有部分區域不可見。 none: 保持原有尺寸比例。同時保持替換內容原始尺寸大小。
  • scale-down:保持原有尺寸比例,如果容器尺寸大於圖片內容尺寸,保持圖片的原有尺寸,不會放大失真;容器尺寸小於圖片內容尺寸,用法跟contain一樣。

今天處理自適應問題時,banner插入的圖片 

  • weidth:100%
  • height:auto

嗯哼,完全不對(看需求),應該高度一定 然后再自適應


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM