object-fit屬性的值:
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
fill:?中文釋義“填充”模捂。默認(rèn)值捶朵。替換內(nèi)容拉伸填滿整個(gè)contentbox,不保證保持原有的比例蜘矢。
contain:?中文釋義“包含”。保持原有尺寸比例综看。保證替換內(nèi)容尺寸一定可以在容器里面放得下品腹。因此,此參數(shù)可能會(huì)在容器內(nèi)留下空白红碑。
cover:?中文釋義“覆蓋”舞吭。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸析珊,寬度和高度至少有一個(gè)和容器一致。因此忠寻,此參數(shù)可能會(huì)讓替換內(nèi)容(如圖片)部分區(qū)域不可見(jiàn)(上面講解的例子就是如此)惧浴。
none:?中文釋義“無(wú)”。保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小倡蝙。
scale-down:?中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個(gè)绞佩。