在網站中，圖片扮演著非常重要的角色，因為它們能夠吸引用戶的注意力并讓頁面看起來更加漂亮。當我們在網頁中使用圖片時，我們需要遵循一些規則和最佳實踐，以確保圖片的尺寸適合網頁的大小。
CSS是一種強大的工具，可以幫助我們處理和控制網頁上的所有元素，包括圖片。通過使用CSS，我們可以將圖片的尺寸設置為適合我們的需要。下面是在CSS中設置圖片大小的兩個常用方法：
1. 使用width和height屬性
可以使用CSS屬性width和height來指定圖片的寬度和高度。例如，下面的代碼將圖片的寬度設置為300像素，高度設置為200像素：

img {
width: 300px;
height: 200px;
}

這段代碼將使所有的圖片都按照300x200像素的大小顯示在網頁上。
2. 使用max-width和max-height屬性
另一種常用的方法是使用CSS屬性max-width和max-height。這種方法會將圖片的尺寸設置為最大值，同時保持圖片的寬高比。例如，下面的代碼將使圖片的最大寬度為300像素：

img {
max-width: 300px;
}

如果圖片的原始寬度小于300像素，則圖片將不會被拉伸。如果原始寬度大于300像素，則圖片將縮小到300像素寬度，同時保持寬高比不變。
在設置圖片大小時，需要注意以下幾點：
1. 盡量避免拉伸、壓縮或扭曲圖片，因為這樣會導致失真和不清晰。
2. 如果使用max-width和max-height屬性，圖片不會被拉伸，但是也可能出現空白區域。如果要避免這種情況，可以將CSS屬性object-fit設置為“cover”，這樣會將圖片調整為鋪滿整個容器。
3. 適當地壓縮圖片，以提高網頁的加載速度。可以使用在線工具或軟件來壓縮圖片。
總之，在設計網頁時，應該對圖片的大小和質量進行仔細的考慮，以確保圖片能夠適應網頁的大小，同時保持清晰和優美的外觀。