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