當(dāng)我們需要在網(wǎng)頁(yè)中插入圖片時(shí),需要使用CSS樣式來(lái)調(diào)整圖片的排版和布局,下面來(lái)介紹一下常用的CSS樣式。
img { width: 100px; height: 100px; display: block; margin: 0 auto; }
上述代碼使用了img標(biāo)簽的CSS樣式來(lái)調(diào)整圖片,其中:
1. width和height用來(lái)設(shè)置圖片的寬度和高度,一般情況下需要根據(jù)具體的要求設(shè)置;
2. display: block;表示將圖片顯示為塊級(jí)元素,使得后面的元素能夠順利排列;
3. margin: 0 auto;用來(lái)居中顯示圖片,其中0表示上下邊距,auto表示左右邊距自動(dòng)調(diào)整。
除了使用img標(biāo)簽的樣式,還可以使用背景圖片的樣式,代碼如下:
div { background-image: url("img/bg.png"); width: 500px; height: 300px; background-size: cover; }
上述代碼使用了div標(biāo)簽的CSS樣式來(lái)設(shè)置背景圖片,其中:
1. background-image表示設(shè)置背景圖片的路徑;
2. width和height用來(lái)設(shè)置div元素的寬度和高度;
3. background-size: cover;用來(lái)將背景圖片拉伸或壓縮至適應(yīng)div元素的大小。
通過(guò)上述介紹,我們可以使用不同的CSS樣式來(lái)完成圖片的排版和布局。