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

1. 內(nèi)聯(lián)樣式設(shè)置
2. 使用CSS樣式表設(shè)置圖片尺寸
3. 保持圖片寬度和高度一致的方法

CSS技巧：圖片尺寸的統(tǒng)一調(diào)整

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要調(diào)整圖片的尺寸以確保它們?cè)陧?yè)面中顯示得當(dāng)，使用CSS（層疊樣式表）可以輕松實(shí)現(xiàn)這一目標(biāo)，無(wú)需對(duì)每張圖片分別進(jìn)行復(fù)雜的HTML調(diào)整，以下是一些關(guān)于如何使用CSS設(shè)置圖片高度和寬度的方法。

內(nèi)聯(lián)樣式設(shè)置

直接在HTML元素中使用style屬性來(lái)設(shè)置圖片的寬度和高度。

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

這種方式簡(jiǎn)單直接，但對(duì)于大型項(xiàng)目而言，可能會(huì)使HTML代碼變得冗長(zhǎng)且難以維護(hù)，更推薦的做法是將樣式寫(xiě)入CSS文件或樣式標(biāo)簽中。

使用CSS樣式表設(shè)置圖片尺寸

在CSS樣式表中，你可以為圖片定義一個(gè)類(lèi)，然后在HTML中引用這個(gè)類(lèi)。

.img-size {
  width: 200px;
  height: 200px;
}

然后在HTML中這樣使用：

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

保持圖片寬度和高度一致的方法

如果你希望圖片的寬度和高度保持一致（使圖片始終為正方形），可以使用object-fit屬性。

img {
  width: 200px; /* 或其他你需要的尺寸 */
  height: 200px; /* 保持與寬度一致 */
  object-fit: cover; /* 確保圖片始終覆蓋整個(gè)容器并保持其比例 */
}

這種方法可能會(huì)導(dǎo)致圖片的某些部分被裁剪，在使用時(shí)需要根據(jù)實(shí)際情況進(jìn)行選擇，確保瀏覽器支持object-fit屬性，對(duì)于不支持的瀏覽器，可能需要使用其他方法或回退策略，使用CSS調(diào)整圖片尺寸是一種靈活且強(qiáng)大的方法，可以幫助你更好地控制網(wǎng)頁(yè)中的圖片顯示。