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

1. 設(shè)定固定大小
2. 按比例調(diào)整大小

CSS3中如何改變圖片大小

在CSS3中，我們可以通過調(diào)整圖片的寬度和高度來改變圖片大小，這是一種非常實(shí)用的技術(shù)，尤其在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，我們需要在不同屏幕尺寸和分辨率下調(diào)整圖片大小以適應(yīng)頁面布局，下面是如何在CSS3中改變圖片大小的具體步驟。

設(shè)定固定大小

在CSS中，我們可以使用width（寬度）和height（高度）屬性來設(shè)定圖片的大小。

img {
  width: 300px;  /* 設(shè)置圖片寬度為300像素 */
  height: 200px; /* 設(shè)置圖片高度為200像素 */
}

按比例調(diào)整大小

如果我們希望保持圖片的原始比例，可以只設(shè)定寬度或高度的一個(gè)值，另一個(gè)值則自動按比例調(diào)整。

img {
  width: 50%;   /* 設(shè)置圖片寬度為容器寬度的50% */
  height: auto; /* 高度自動調(diào)整以保持圖片比例 */
}

三、使用max-width和max-height

在響應(yīng)式設(shè)計(jì)中，我們可能會希望圖片在達(dá)到某個(gè)***大寬度或高度時(shí)停止擴(kuò)展，這時(shí)，我們可以使用max-width和max-height屬性。

img {
  max-width: 100%; /* 圖片***大寬度為容器寬度的100% */
  height: auto;    /* 高度自動調(diào)整以保持圖片比例 */
}

就是在CSS3中改變圖片大小的基本方法，需要注意的是，這些方法不會改變圖片文件本身的大小，而只是改變了圖片在網(wǎng)頁上的顯示大小，這些方法也不會改變圖片的原始比例，除非我們特意設(shè)定了新的比例值，在實(shí)際應(yīng)用中，我們可以根據(jù)具體需求和設(shè)計(jì)目標(biāo)選擇合適的方法。