神奇的object-fit屬性

基本作用概述

對圖片進行剪切,保留原始比例。完美解決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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章