CSS是網頁設計必備技能之一，其中圖片的設置是非常重要的一部分。在CSS中，我們可以使用width和height屬性來設置圖片的大小。下面的文章將從基本的設置大小方法、設置固定大小和設置相對大小三個方面來詳細介紹。 基本的設置大小方法 要設置圖片的大小，我們需要在CSS樣式表中添加width和height屬性，將其設為像素值即可。例如，我們想要將圖片的大小設置為300像素寬、200像素高，可以使用如下代碼：

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

這樣，所有的圖片都會被設置為300x200大小，但是這種方法有一個缺點，即圖片可能會因為寬高比例不同而變形。為了解決這個問題，我們可以使用設置固定大小或設置相對大小的方法。 設置固定大小 設置固定大小是指對圖片進行裁剪或縮放，以滿足我們的需求。在CSS中，我們可以使用object-fit屬性來實現這個目的。下面是一個例子：

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

這個例子中，我們將圖片的大小設置為300x200，并使用object-fit:cover來實現將圖片按比例縮放并裁剪，以適應300x200的大小。除了cover外，object-fit屬性還可以設置為contain、fill、none、scale-down等值，具體可以根據需求進行選擇。 設置相對大小 有時候，我們想要將圖片的大小設置為相對于其父容器的大小，這個時候可以使用百分比或者vw、vh單位來實現。下面的例子演示了如何使用百分比來實現相對大小：

.container {
width: 500px;
height: 300px;    
}
img {
width: 50%;
height: 50%;
}

這個例子中，我們將img的寬度和高度都設置為50%，這樣它們的大小就會相對于父元素的大小進行計算。同樣的方式，我們也可以使用vw和vh單位來實現相對大小。 總結 在CSS中，設置圖片大小是很重要的一部分，我們可以使用width和height屬性來設置基本大小，也可以使用object-fit屬性來設置固定大小，同時還可以使用百分比、vw、vh單位來設置相對大小。選擇合適的方法，會使我們的網頁看起來更加美觀。