CSS是網頁設計中不可或缺的一部分，它可以讓網頁更加美觀，并對網頁元素進行定位和排版。除此之外，在使用CSS的過程中，我們還可以對圖片進行限制和優化，防止過大的圖片拖慢網頁載入速度，提高用戶體驗。

當我們需要在網頁中嵌入圖片時，一定要控制圖片的大小。過大的圖片會讓網頁加載速度變慢，導致用戶訪問速度緩慢，甚至可能直接退出。CSS提供了多種限制和優化圖片的方式，下面我們來學習兩種常用的方法。

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

上面的代碼是限制圖片最大寬度和限定高度自動調整的方式。當圖片寬度超出父容器的寬度時，圖片會自動縮小至父容器的寬度，并根據比例自動調整高度。這個方法適用于大部分情況，能夠很好地減少圖片的加載時間。

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

另外一種限制圖片大小的方法是限制最大高度和最大寬度。這個方法通常適用于需要保證網頁排版的情況。在這個方法中，我們限定了圖片的最大高度為400像素，如果圖片高度超過了這個大小，CSS會自動縮小圖片，保證圖片不會影響到網頁的布局。

總之，在網頁設計中，我們一定要注意圖片的大小和優化，為用戶提供更好的使用體驗。以上兩種方法不論哪種都是限制圖片大小的有效方式，根據實際需要選擇更加適合的方法即可。