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文件中