在網頁設計中，圖片是必不可少的元素，但是圖片的大小并不總是合適，我們需要對其進行縮放。然而，當我們對圖片進行縮放時，會面臨一個問題：如何保持圖片的比例，防止圖片因為過度縮放而失真。 CSS提供了一個很好的解決方法：使用max-width和max-height屬性。下面是一個例子：

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

這段代碼告訴瀏覽器，在任何情況下，圖片的寬度和高度都不會超過父容器的100%。這樣做的好處是，無論圖片的原始大小如何，都會將其縮放到合適的大小，并且保持其原始比例。 此外，還有一種更精確的方法可以設置圖片的比例：使用padding屬性。這種方法也可以避免圖片失真。

.container {
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container:before {
content: "";
display: block;
padding-top: 75%; /* 圖片的高寬比例，這里是4:3 */
}

這個例子中，我們使用了一個容器和一個偽元素。我們通過設置偽元素的padding-top屬性，來達到設置圖片比例的目的。然后，我們將圖片的寬度和高度都設置為100%，通過絕對定位來將圖片放在正確的位置。最后，我們使用object-fit屬性，將圖片保持比例填充容器。 總之，在網頁設計中，保持圖片比例縮放是一個很重要的問題。無論是使用max-width和max-height屬性，還是使用padding屬性，我們都可以輕松地避免圖片失真的問題，讓網頁變得更加美觀。