1. 程式人生 > >css3圖片處理方式 object-fit

css3圖片處理方式 object-fit

含義 class 替換 down 區域 尺寸 屬性 obj over

.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: 中文釋義“降低”。就好像依次設置了nonecontain, 最終呈現的是尺寸比較小的那個。

css3圖片處理方式 object-fit