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