img標簽圖片拉伸變形的處理


給圖片css添加object-fit屬性,可用參數:
object-fit屬性由下列的值中選擇一個關鍵字來指定。

fill
被替換的內容大小可以填充元素的內容框。 整個對象將完全填充此框。 如果對象的高寬比不匹配其框的寬高比,那么該對象將被拉伸以適應。

contain
被替換的內容將被縮放,以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比,因此如果寬高比與框的寬高比不匹配,該對象將被添加“黑邊”。

cover
被替換的內容大小保持其寬高比,同時填充元素的整個內容框。 如果對象的寬高比與盒子的寬高比不匹配,該對象將被剪裁以適應。

none
被替換的內容尺寸不會被改變。

scale-down
內容的尺寸就像是指定了none或contain,取決於哪一個將導致更小的對象尺寸。

建議使用cover、none或contain。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM