對(duì)于許多網(wǎng)站來說，圖片都是必不可少的。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，有時(shí)需要調(diào)整圖片的大小以確保它們適合頁(yè)面布局。但是，許多人可能會(huì)發(fā)現(xiàn)設(shè)置圖片的大小并不是易如反掌，這就是本文將要涉及的內(nèi)容：html圖片大小怎么設(shè)置

對(duì)于許多網(wǎng)站來說，圖片都是必不可少的。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，有時(shí)需要調(diào)整圖片的大小以確保它們適合頁(yè)面布局。但是，許多人可能會(huì)發(fā)現(xiàn)設(shè)置圖片的大小并不是易如反掌，這就是本文將要涉及的內(nèi)容：html圖片大小怎么設(shè)置。

1. 新建一個(gè)HTML文件

首先，在HBuilder編輯器中新建一個(gè)HTML文件?？梢酝ㄟ^單擊“文件”菜單，然后選擇“新建文件”來完成此操作。

2. 設(shè)置DIV標(biāo)簽的尺寸

接下來，在HTML文件中添加一個(gè)DIV標(biāo)簽并設(shè)置其固定寬度和高度?？梢允褂靡韵翪SS代碼：

```

div {

width: 500px;

height: 300px;

}

```

這將使DIV標(biāo)簽具有500像素寬度和300像素高度。當(dāng)然，你可以根據(jù)需要更改這些值。

3. 插入圖片并設(shè)置大小

在DIV標(biāo)簽中插入一張圖片，并使用以下CSS代碼將其寬度設(shè)置為與父級(jí)相同：

```

img {

width: 100%;

display: block;

}

```

這里的“width: 100%;”將使圖片的寬度自動(dòng)跟隨其父級(jí)元素的寬度。同時(shí)，“display: block;”會(huì)將圖片轉(zhuǎn)換為塊狀元素，這樣它就能夠完全鋪滿DIV標(biāo)簽。

4. 去除父級(jí)高度

最后，需要將父級(jí)元素的高度去掉。可以使用以下CSS代碼：

```

div {

width: 500px;

}

```

這將使DIV標(biāo)簽保持500像素的寬度，但它的高度將會(huì)自動(dòng)調(diào)整以適應(yīng)其中的圖片。

5. 查看結(jié)果

現(xiàn)在，可以在瀏覽器中打開HTML文件以查看結(jié)果。如果一切順利，你將看到一個(gè)完全填滿DIV標(biāo)簽的圖片！

總結(jié)

在HTML中設(shè)置圖片大小并不復(fù)雜，只需設(shè)置包含圖片的父級(jí)元素的寬度，然后將圖片寬度設(shè)置為100%，再將父級(jí)元素的高度去掉即可。記得將圖片轉(zhuǎn)換為塊級(jí)元素以便完全填充父元素。