本文目錄導讀：

1. 使用CSS內(nèi)聯(lián)樣式調(diào)整圖片尺寸
2. 使用外部CSS樣式表調(diào)整圖片尺寸

CSS技巧：圖片尺寸調(diào)整

在網(wǎng)頁設計中，我們經(jīng)常需要調(diào)整圖片的尺寸以適應頁面布局，使用CSS（層疊樣式表）可以輕松實現(xiàn)這一目標，無需改動HTML代碼，本文將介紹如何通過CSS調(diào)整圖片尺寸，使圖片適應網(wǎng)頁布局。

使用CSS內(nèi)聯(lián)樣式調(diào)整圖片尺寸

在HTML標簽內(nèi)直接添加style屬性，通過width和height屬性調(diào)整圖片尺寸。

<img src="example.jpg" style="width:50%; height:auto;" />

上述代碼將圖片寬度設置為容器寬度的50%，高度自動調(diào)整，以保持圖片比例不變。

使用外部CSS樣式表調(diào)整圖片尺寸

在外部CSS樣式表中，為圖片定義一個類，然后在HTML中引用該類。

.img-small {
  width: 50%;
  height: auto;
}

在HTML中使用該類：

<img src="example.jpg" class="img-small" />

這種方法使HTML和CSS分離，便于管理和維護。

三、使用CSS的max-width和max-height屬性

當圖片尺寸過大時，可以使用max-width和max-height屬性限制圖片的***大尺寸，這有助于確保圖片在不同設備和屏幕尺寸上都能良好顯示。

.img-responsive {
  max-width: 100%;
  height: auto;
}

通過CSS，我們可以輕松地調(diào)整圖片的尺寸，使其適應網(wǎng)頁布局，我們可以使用內(nèi)聯(lián)樣式、外部CSS樣式表，或者使用max-width和max-height屬性來實現(xiàn)這一目標，在實際設計中，根據(jù)頁面需求和設計目標，選擇***適合的方法進行調(diào)整。