在前端開發中，使用 CSS 對圖片的大小進行控制是輕松而快捷的。在網頁設計中，一個關鍵的問題是如何使圖像適應不同屏幕尺寸，以便在不同的設備上獲得最佳的視覺體驗。CSS 提供了各種方法來實現這一點。

下面介紹幾種常見的 CSS 圖片大小控制方式：

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

上面這段 CSS 代碼中，利用 max-width 控制在不同尺寸的屏幕上，圖片寬度鋪滿整個容器，且不會超出容器的寬度；同時，設置了 height: auto，保證圖片的高度可以自適應當前圖像寬度的變化。

img {
width: 50%;
height: auto;
}

這段 CSS 代碼中，利用 width: 50% 將圖片寬度設置為父級元素的一半，同樣保持了圖片高度的自適應。

img {
width: 300px;
height: 200px;
object-fit: cover;
}

這段 CSS 代碼中，利用固定的寬度和高度，使得圖片與容器大小完全匹配，同時利用 object-fit: cover 讓圖片完全覆蓋容器，可能會被裁剪，以便填充整個容器。

div {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: contain;
}

這段 CSS 代碼中，不再使用 img 標簽，而是將圖片作為背景圖設置。利用 background-size: contain 將圖片縮放至不超過容器，同時保持長寬比，以確保整個圖像呈現在容器中。

總之，在使用 CSS 進行圖片大小控制時，需要時刻考慮不同設備的屏幕尺寸，同時權衡自適應與定制化的需求，以獲得最佳的用戶體驗。