CSS是網頁設計中必不可少的一部分，它可以控制網頁的樣式和布局。在網頁設計中，經常會用到圖片，并需要對圖片進行縮放。CSS提供了多種方法來實現圖片縮放，下面我們來詳細探討一下。 首先，我們需要了解兩個CSS屬性：width和height。這兩個屬性分別用于設置元素的寬度和高度。我們可以使用這兩個屬性來控制圖片的尺寸。 ``` img { width: 50%; /* 原始寬度的50% */ height: auto; /* 高度會自動適應 */ } ``` 上面的代碼可以將圖片的寬度縮小到原來的50%。為了避免圖片的比例失調，我們還需要將它的高度調整為自適應。 除了直接設置元素的寬度和高度，我們還可以使用另一種方法：使用max-width和max-height屬性。 ``` img { max-width: 100%; max-height: 100%; } ``` 這種方法會將圖片的最大尺寸限制為容器元素的尺寸。當容器元素縮小時，圖片也會跟著縮小。 如果我們希望同時設置固定寬度和高度，并將圖片居中顯示，可以使用以下代碼： ``` img { width: 200px; height: 200px; display: block; margin: 0 auto; } ``` 這段代碼將圖片的寬度和高度都設置為200px，并將圖片居中顯示。 最后，我們來看看另一個屬性：object-fit。這個屬性可以控制圖片如何適應容器元素。比如，我們可以設置為cover，讓圖片填滿容器元素，并保持縱橫比。 ``` img { width: 100%; height: 200px; object-fit: cover; } ``` 上面的代碼將圖片縮放成容器元素的高度，并讓它填滿容器元素。 在網頁設計中，圖片是不可或缺的一部分。CSS提供了多種方法來控制圖片的尺寸，使得網頁的布局更加靈活。我們可以根據需要選擇不同的方法來實現圖片縮放。