HTML 圖片標(biāo)簽可以讓我們在網(wǎng)頁中插入各種圖片,而且還可以通過設(shè)置圖片大小來讓圖片在頁面中的位置更加合適。
<img src="image.jpg" width="500" height="300">
在上面的代碼中,我們使用了<img>
標(biāo)簽來插入一張名為image.jpg
的圖片。我們還使用了width
和height
屬性來設(shè)置這張圖片的寬度和高度。這樣,這張圖片就會按照我們指定的尺寸顯示,而不是默認的大小。
如果我們只指定了其中一個屬性,另外一個屬性會根據(jù)圖片的比例自動計算出來。例如:
<img src="image.jpg" width="500">
在這個例子中,我們只指定了圖片的寬度,而沒有指定高度。這樣,這張圖片的高度會根據(jù)它的寬度和它原本的比例自動計算出來。
我們也可以在 CSS 中使用width
和height
屬性來控制圖片的大小。例如:
img { width: 500px; height: 300px; }
上面的 CSS 代碼將會讓所有<img>
標(biāo)簽的寬度都為500px
,高度都為300px
。
需要注意的是,如果我們使用 CSS 控制圖片的大小,那么很可能會出現(xiàn)拉伸或壓縮的情況。為了避免這種情況,我們最好使用和圖片原本比例相同的寬度和高度。