在網頁設計中，圖片是不可或缺的元素。但是在有些情況下，圖片的大小可能并不符合我們的需求，這時就需要用到 CSS 來控制圖片的比例。 在 CSS 中，我們可以使用 `width` 和 `height` 屬性來設置圖片的大小。但是如果僅僅使用這兩個屬性，可能會導致圖片被拉伸或壓縮，從而破壞它原有的比例。為了保持圖片的比例，我們可以使用 `max-width` 和 `max-height` 屬性來控制圖片的最大寬度和最大高度。 例如，如果我們想在網頁中顯示一張寬度為 800 像素、高度為 600 像素的圖片，并且要保持它的比例，可以使用以下 CSS 代碼：

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

這樣設置之后，當圖片的寬度或高度超過了它在瀏覽器中能夠顯示的最大值時，它就會按比例縮小，以適應容器的大小。同時，當容器的大小小于圖片的大小時，圖片也不會被拉伸或壓縮，而是會在容器中保持原有的比例，以適應容器的大小。 值得注意的是，在使用 `max-width` 和 `max-height` 屬性時，需要將它們的值設置為百分比。這是因為百分比可以根據容器的大小動態調整，從而保持圖片的比例。如果將它們的值設置為具體的像素值，可能會導致在不同尺寸的容器中顯示效果不一致。 綜上所述，通過使用 `max-width` 和 `max-height` 屬性，我們可以輕松控制圖片的比例，以適應不同大小的容器。這是網頁設計中一個重要的技巧，也是設計師必須掌握的基本技能之一。