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

1. 使用CSS控制圖片尺寸
2. 使用CSS實現(xiàn)圖片動態(tài)變化

CSS技巧：動態(tài)調(diào)整圖片尺寸

在網(wǎng)頁設(shè)計中，圖片尺寸的調(diào)整是非常常見的需求，通過CSS，我們可以輕松地控制圖片的尺寸，使其適應(yīng)不同的場景和用戶需求，本文將介紹如何使用CSS實現(xiàn)圖片的變大變小效果。

使用CSS控制圖片尺寸

1、內(nèi)聯(lián)樣式

我們可以通過在HTML元素中使用style屬性來直接設(shè)置圖片的寬度和高度。

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

這種方式簡單直接，但不利于代碼的維護(hù)和復(fù)用。

2、CSS樣式表

為了代碼的整潔和可維護(hù)性，我們通常會在CSS樣式表中設(shè)置圖片的尺寸。

.img-style {
  width: 100px;
  height: 100px;
}

然后在HTML中引用這個樣式類：

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

使用CSS實現(xiàn)圖片動態(tài)變化

1、響應(yīng)式圖片

利用CSS的媒體查詢（Media Query），我們可以實現(xiàn)圖片的響應(yīng)式布局，使圖片在不同屏幕尺寸下自動調(diào)整尺寸。

.img-responsive {
  width: 100%; /* 圖片寬度為父元素寬度的100% */
  height: auto; /* 高度自動調(diào)整，保持原始比例 */
}

在媒體查詢中，我們還可以設(shè)置特定的屏幕尺寸下的圖片尺寸。

2、使用CSS動畫或過渡效果

通過CSS的動畫和過渡效果，我們可以實現(xiàn)圖片的放大和縮小效果，使用transition屬性實現(xiàn)鼠標(biāo)懸停時圖片放大：

img {
  transition: transform 0.3s ease; /* 設(shè)置過渡效果 */
}
img:hover {
  transform: scale(1.5); /* 鼠標(biāo)懸停時放大圖片 */
}

使用CSS，我們可以輕松地控制圖片的尺寸，并實現(xiàn)圖片的動態(tài)變化，在實際項目中，我們可以根據(jù)需求和場景選擇合適的方法來實現(xiàn)圖片的尺寸調(diào)整和動態(tài)效果。