在CSS中,圖片在默認(rèn)情況下會(huì)橫向鋪滿整個(gè)容器。這在某些情況下可能不是我們想要的效果。比如當(dāng)我們要設(shè)置圖片在一行內(nèi)居中顯示時(shí),圖片鋪滿了整行就顯得很不自然。所以,在這種情況下,我們需要清除圖片的橫向鋪滿樣式。
我們可以使用以下CSS代碼來清除圖片的橫向鋪滿樣式:
img{ display:block; max-width:100%; height:auto; margin:0 auto; }
這段CSS代碼中,我們將圖片的display屬性設(shè)置為block,這意味著圖片將成為塊級元素,縱向排列,不再橫向鋪滿容器。而通過設(shè)置max-width:100%和height:auto,我們可以確保圖片在大小不同的容器中均可自適應(yīng)大小,保證了圖片不會(huì)失真。最后,我們還可以使用margin:0 auto屬性讓圖片在容器中水平居中顯示。
使用這段CSS代碼,我們就可以輕松地清除圖片的橫向鋪滿樣式,得到我們想要的圖片顯示效果。