在網頁設計中，CSS圖片放小是一個非常常見的問題，但放小后圖片可能會出現變形，影響頁面的美觀度和用戶體驗。下面通過代碼演示和解釋，來介紹如何避免這個問題。

.img {
height: 200px;
width: 200px;
}

上述代碼是設置了一個寬高為200px的圖片，現在我們需要縮小這個圖片，避免變形。常見的方式是通過設置max-width和max-height屬性。這里設置max-width為100%，這樣縮小后的圖片不會超過原始圖片的尺寸，同時也保證了圖片不會變形。下面是代碼：

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

這樣設置后，縮小的圖片將根據原始圖片的比例來顯示，不會出現變形。使用這種方式縮小圖片，可以讓頁面更加美觀，同時提高用戶體驗。