CSS3中可以使用object-fit
屬性來控制圖片在容器中的填充方式,從而實(shí)現(xiàn)去掉img占位符的效果。
HTML代碼:
<div class="img-container"> <img src="image.jpg" alt="image"> </div>
CSS代碼:
.img-container { width: 200px; height: 200px; } .img-container img { object-fit: cover; }
在上面的代碼中,我們定義了一個(gè)名為img-container
的div容器,并設(shè)置了寬度和高度,我們將img元素放入該容器中,并使用object-fit: cover;
屬性來控制圖片的填充方式,該屬性將圖片縮放并裁剪以適應(yīng)其容器的大小,從而去掉img占位符。
需要注意的是,object-fit
屬性在IE瀏覽器中不受支持,如果您需要支持IE瀏覽器,請(qǐng)考慮使用其他方法來實(shí)現(xiàn)去掉img占位符的效果。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。