CSS是Web開發中必不可少的一項技能，其中圖片縮小不變形也是很重要的一部分。我們日常中經常會遇到需要縮小圖片的需求，但是如果直接進行縮小操作，圖片常常會發生變形、失真、模糊等情況，影響美觀度。那么該如何做呢？

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

如上代碼即可實現圖片縮小不變形。下面我們來詳解一下。

首先，我們需要先明確一下幾個概念：

• 寬度(width)：圖片的寬度
• 高度(height)：圖片的高度
• 比例(aspect ratio)：寬度與高度的比值
• 尺寸(size)：圖片的寬度和高度組成的像素數值，如800x600

我們將以上的概念應用到圖片縮小的處理上：

• 當我們設置img的width和height屬性時，圖片會按照設置的數值進行縮放，但圖片的比例不一定會和原圖一致，因此經常會出現圖片變形的情況。
• 當我們只設置img的width屬性時，圖片會按照設置的寬度進行縮放，但圖片的高度也跟著縮放，這會導致圖片的變形。
• 因此，我們可以使用max-width屬性來指定圖片的最大寬度，使圖片可以根據瀏覽器窗口大小等情況進行自適應縮放，同時height屬性設置為auto，可以讓圖片的高度按比例自適應變化，從而保證了圖片在縮小的同時不會變形。

綜上，我們可以通過CSS中的max-width和height屬性來實現圖片在縮小的同時不變形，更好地展示我們的作品。