基本作用概述
對圖片進行剪切,保留原始比例。完美解決Img自適應問題
參數
fill | contain | cover | none | scale-down
contain
被替換的內容將被縮放,以在填充元素的內容框時保持其寬高比。整個對象在填充盒子的同時保留其長寬比,因此如果寬高比與框的寬高比不匹配,該對象將被添加“黑邊”。
cover
被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配,該對象將被剪裁以適應內容框。
fill
被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配,那麼該對象將被拉伸以適應內容框。
none
被替換的內容將保持其原有的尺寸。
scale-down
內容的尺寸與 none 或 contain 中的一個相同,取決於它們兩個之間誰得到的對象尺寸會更小一些。
怎麼用
只需要給img css屬性
width: 100%;
height: 100%;
object-fit: cover;
兼容性
不兼容ie,如果你需要兼容,可以看看這個開源解決方案:
https://github.com/fregante/object-fit-images