在網頁設計中，圖片的尺寸是非常重要的一部分，它不僅影響頁面的美觀度，還會影響頁面的加載速度。所以，如何正確的調節圖片的尺寸是每個網頁設計師必須掌握的技能之一。其中，CSS 是一個非常強大的工具，可以幫助我們快速有效地調節圖片的尺寸。 下面我們來介紹一下 CSS 中調節圖片尺寸的方法。 1. 使用 width 和 height 屬性 在 CSS 中，我們可以使用 width 和 height 屬性來調節圖片的大小。它們的用法非常簡單，只需要將像素值賦給它們即可。如下所示：

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

上面的代碼會將圖片的寬度設置為 300 像素，高度設置為 200 像素。當然，你也可以只設置其中一個屬性，這時圖片的另一個屬性會按照原比例自動縮放。 值得注意的是，如果你想要讓圖片按照原比例縮放，你只需要設置其中一個屬性即可，不需要同時設置兩個屬性。 2. 使用 max-width 和 max-height 屬性 有時候，我們并不想限制圖片的具體大小，而是希望圖片能夠按照一定的比例縮放，這時候我們可以使用 max-width 和 max-height 屬性。例如：

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

上面的代碼會將圖片的最大寬度和最大高度都設置為父元素的 100%，這樣圖片就會按照一定的比例進行縮放。如果圖片的大小比父元素要小，設置這兩個屬性并不會對圖片產生影響。 3. 使用 object-fit 屬性 有時候，我們希望圖片可以填充到指定的位置，但是不想改變圖片的比例，這時候我們可以使用 object-fit 屬性。例如：

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

上面的代碼會將圖片填充到指定的位置，并且保持圖片的比例不變。object-fit 屬性還有其他的取值，比如 contain、fill、none 等，可根據實際情況進行選擇。 總結一下，CSS 調節圖片大小的方法有三種：使用 width 和 height 屬性，使用 max-width 和 max-height 屬性，以及使用 object-fit 屬性。不同的屬性適用于不同的場景，我們可以根據實際需要進行選擇。