CSS圖片按比例自動縮放是網頁設計中非常有用的技巧，可以保證圖片在不同的屏幕大小下都能展示出最佳的效果。下面我們來學習如何在CSS中實現圖片按比例自動縮放。

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

上述代碼中，max-width屬性設置為100%，表示圖片的最大寬度為父元素的寬度。這樣，在瀏覽器窗口變小時，圖片也會相應地縮小；在瀏覽器窗口變大時，圖片也會相應地放大。

height屬性設置為auto，表示圖片的高度會根據寬度自動調整。這樣可以避免圖片變形，保證圖片按比例縮放。

如果想限制圖片的最大高度和最小高度，可以使用min-height和max-height屬性：

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

上述代碼中，min-height和max-height分別設置為100px和500px，表示圖片的高度不會小于100px，也不會大于500px。

通過使用CSS圖片按比例自動縮放技巧，可以讓網頁設計更加靈活適應不同的設備和屏幕大小，提升網站的用戶體驗。