在網頁設計中，經常需要使用圖片展示產品、宣傳資訊等。但是，有時候圖片尺寸過大，會影響頁面加載速度，也會影響用戶體驗。此時，我們可以使用CSS對圖片進行縮小處理。但是，如果直接縮小圖片，就會出現裁剪的情況，影響圖片展示效果。那么，該如何做到圖片縮小不裁剪呢？

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

上述代碼即可實現圖片縮小不裁剪的效果。其中，max-width:100%;表示圖片寬度最大只能占據父元素的100%，也就是屏幕寬度的100%。而height:auto;則表示圖片高度自適應，不會造成圖片變形。

此外，我們還可以使用其它CSS屬性對圖片進行進一步的樣式美化，例如：

img{
max-width:100%;
height:auto;
border-radius:10px; /* 圓角效果 */
box-shadow:0px 0px 10px #999; /* 陰影效果 */
}

以上兩行代碼分別為圖片添加了圓角和陰影效果，讓圖片更加美觀。

總之，CSS的圖片縮小不裁剪技巧可以幫助我們有效地提高頁面加載速度，提升用戶體驗。同時，通過添加樣式，還能讓圖片更加美觀。這是網頁設計中必備的技巧之一。