我們在H5中對於圖片的屬性包含如下:
object-fit屬性有哪些值呢?
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
fill: 中文釋義“填充”。默認值。替換內容拉伸填滿整個contentbox,不保證保持原有的比例。
contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此,此參數可能會在容器內留下空白。
cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸,寬度和高度至少有一個和容器一致。因此,此參數可能會讓替換內容(如圖片)部分區域不可見(上面講解的例子就是如此)。
none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。
小程序的參考小程序文檔。。。