圖片處理時的object-fit屬性簡介

object-fit有5個值:

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
  • fill: 中文釋義“填充”(默認)。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
  • contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器裏面放得下。因此,此參數可能會在容器內留下空白。
  • cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸,寬度和高度至少有一個和容器一致。因此,此參數可能會讓替換內容(如圖片)部分區域不可見。
  • none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
  • scale-down: 縮放,以適應顯示區域,當顯示區域小於圖片大小時,圖片被縮放;當顯示區域大於圖片大小時表現爲圖片正常的大小,效果和none一致

使用方法,寫在css文件中

發佈了16 篇原創文章 · 獲贊 6 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章