編寫網(wǎng)站時，有時會用到很多的圖片。但是剪裁起來又比較浪費(fèi)時間。不剪裁的話圖片又不美觀，有時會變形。那么下面的這個屬性就是很派的上用場了。、
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
默認(rèn)值是fill；
fill官方的解釋是：被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應(yīng)內(nèi)容框。
說白了就是圖片放大到需要的像素，圖片會變形。
object-fit:cover；就是圖片等比例放大到需要的大小。圖像不會變形。
這個是比較常用的。以后上傳圖片的時候就不用剪裁那么麻煩了。
IE不支持！?。?！
oh，無語，氣憤，傷心，落淚?。。。。?！萬惡的IE。
如果不考慮IE的話，可以嘗試一下使用這個簡單粗暴的屬性。
舉個栗子
沒有添加object-fit：cover屬性的時候，是不是圖片看著不太美觀有點(diǎn)變形。
添加上object-fit：cover之后，圖片就變得舒服很多；
添加上這個屬性之后，客戶在后臺上傳文章的時候也不用去刻意剪裁圖片。非常方便。
分享完畢，如果覺得有用的話，請多多關(guān)注濟(jì)南網(wǎng)站建設(shè)濟(jì)南文匯軟件公司~~~
關(guān)鍵詞:
