本文目錄導(dǎo)讀：

1. 內(nèi)聯(lián)樣式設(shè)置圖片大小
2. 在CSS樣式表中設(shè)置圖片大小
3. 使用百分比設(shè)置圖片大小

CSS如何分別設(shè)置圖片大小

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要調(diào)整圖片的大小以適應(yīng)頁面的布局和設(shè)計(jì)，使用CSS（層疊樣式表）可以輕松實(shí)現(xiàn)這一目標(biāo)，本文將指導(dǎo)您如何使用CSS分別設(shè)置圖片大小，使您的網(wǎng)頁布局更加美觀和有序。

內(nèi)聯(lián)樣式設(shè)置圖片大小

在HTML標(biāo)簽內(nèi)使用style屬性，可以直接為圖片設(shè)置寬度和高度。

<img src="example.jpg" style="width:300px; height:200px;">

這種方法簡單直接，但不建議在大量圖片上使用，因?yàn)樗`背了結(jié)構(gòu)和樣式分離的原則。

在CSS樣式表中設(shè)置圖片大小

在外部或內(nèi)部CSS樣式表中，可以通過類名或ID為圖片設(shè)置大小。

/* 通過類名設(shè)置圖片大小 */
.img-size {
  width: 300px;
  height: 200px;
}

然后在HTML中應(yīng)用這個類名：

<img src="example.jpg" class="img-size">

使用百分比設(shè)置圖片大小

除了使用像素值，還可以使用百分比來設(shè)置圖片大小，以適應(yīng)不同的屏幕和布局。

/* 使用百分比設(shè)置圖片大小 */
.img-percent {
  width: 50%;  /* 寬度為容器寬度的50% */
  height: auto; /* 高度自動調(diào)整，保持圖片比例 */
}

在實(shí)際應(yīng)用中，可以根據(jù)需要選擇使用像素值或百分比來設(shè)置圖片大小，請注意在使用百分比時，可能需要考慮圖片的比例和頁面的整體布局。

使用CSS設(shè)置圖片大小是網(wǎng)頁設(shè)計(jì)中常見的操作，我們可以通過內(nèi)聯(lián)樣式、CSS樣式表或使用百分比來實(shí)現(xiàn)這一目標(biāo)，在實(shí)際應(yīng)用中，可以根據(jù)需求和頁面布局選擇合適的方法。