給圖片css添加object-fit屬性,可用參數:
object-fit屬性由下列的值中選擇一個關鍵字來指定。
fill
被替換的內容大小可以填充元素的內容框。 整個對象將完全填充此框。 如果對象的高寬比不匹配其框的寬高比,那么該對象將被拉伸以適應。
contain
被替換的內容將被縮放,以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比,因此如果寬高比與框的寬高比不匹配,該對象將被添加“黑邊”。
cover
被替換的內容大小保持其寬高比,同時填充元素的整個內容框。 如果對象的寬高比與盒子的寬高比不匹配,該對象將被剪裁以適應。
none
被替換的內容尺寸不會被改變。
scale-down
內容的尺寸就像是指定了none或contain,取決於哪一個將導致更小的對象尺寸。
建議使用cover、none或contain。