CSS是網頁設計中不可或缺的一部分，用于控制網頁的樣式和排版。圖片作為網頁中常用的元素之一，經常需要設置其大小以滿足頁面設計的需求。下面我們來介紹一些關于CSS設置圖片大小的知識。

img {
width: 100px;
height: 100px;
}

CSS中通過設置width和height屬性來設置圖片的大小。需要注意的是，如果只設置其中一個屬性，另一個屬性會隨之自動縮放，保持圖片的寬高比不變。例如設置圖片寬度為100px，高度會自動按照寬高比計算得到。

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

另外，為了兼容不同設備寬度，可以使用max-width屬性來限制圖片最大寬度，設置為100%會將圖片寬度設置為其父元素的寬度，同時保持寬高比不變。height設為auto則會自適應調整圖片高度。這樣可以避免圖片在寬度超過父元素的情況下出現溢出的情況。

.container {
width: 600px;
height: 400px;
overflow: hidden;
}
img {
width: 100%;
}

除了直接設置圖片大小外，還可以通過限制圖片容器的大小來達到相同的效果。通過設置容器的width和height屬性，然后將overflow屬性設置為hidden，可以將超出容器范圍的部分自動剪切隱藏。圖片設置為100%的寬度會自適應調整顯示大小。

在設置圖片大小時需要注意，過小的圖片會使網頁看起來模糊不清，過大的圖片則會增大網頁加載的時間和流量，影響用戶體驗。因此，合理設置圖片大小是網頁設計中很重要的一步。