在網頁設計中，圖片是不可缺少的元素。而圖片的大小對于網頁的美觀與效果都有很大的影響。CSS提供了各種方法來調節圖片的大小。

調節圖片大小的方法主要有以下幾種：

img {
width: 100px;  /* 指定圖片的寬度為100像素 */
height: auto;  /* 設置圖片的高度自適應 */
}

這種調節圖片大小的方法是最常用的，通過設置圖片的寬高來達到調節大小的目的。其中，width為指定寬度，height為自適應高度，此時圖片按照等比例縮放。

img {
max-width: 100%;  /* 設置圖片的最大寬度為父元素的100% */
height: auto;  /* 設置圖片的高度自適應 */
}

這種方法可以使圖片不超過其父元素的寬度，保證了網頁的布局穩定。同時，由于設置了圖片的自適應高度，所以圖片也不會拉伸或壓縮變形。

.container {
width: 100%;  /* 設置容器寬度為100% */
height: 200px;  /* 設置容器高度為200像素 */
overflow: hidden;  /* 設置溢出隱藏 */
}
.container img {
width: 100%;  /* 設置圖片寬度為100% */
height: auto;  /* 設置圖片高度自適應 */
}

這種方法通過在容器中設置固定的高度，并將溢出隱藏，來達到將圖片等比例壓縮的目的。當然，這種方法可能會導致圖片的部分內容被裁剪，需要謹慎使用。

總結起來，調節圖片大小可以通過設置圖片的寬高、最大寬度和父容器高度等方式實現。根據不同的情況，可以靈活地選擇使用不同的方法來達到最佳的效果。