在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中,我們常常使用標(biāo)簽來(lái)加入圖片到頁(yè)面中。但是,圖片在被加入到頁(yè)面時(shí),通常會(huì)帶有默認(rèn)的寬高CSS樣式,這會(huì)影響頁(yè)面的美觀和布局。因此,我們需要清除圖片自帶的寬高CSS樣式。
清除圖片自帶寬高CSS樣式的方法是使用CSS樣式表來(lái)覆蓋默認(rèn)樣式。以下是代碼示例:
img { width: auto; height: auto; max-width: 100%; display: block; margin: 0 auto; }
這里的代碼中使用了5個(gè)CSS屬性:
width: auto;
和height: auto;
指定了圖片的寬度和高度為自動(dòng),即圖片按照比例縮放,不會(huì)拉伸變形。max-width: 100%;
指定了圖片的最大寬度為100%,這樣圖片在小屏幕設(shè)備上也不會(huì)超出邊界。display: block;
將圖片顯示為塊級(jí)元素,這樣可以使用margin: 0 auto;
將圖片居中顯示。
以上代碼可以放在CSS樣式表的任意位置。如果沒(méi)有使用CSS樣式表,可以將代碼放在
標(biāo)簽內(nèi)的