css3在布局方面有許多使用的技巧，其中一個就是使圖片在不變形的情況下自適應布局。下面我們就來看看如何運用css3實現淘寶圖片不變形的效果。

.img-wrapper {
max-width: 100%;
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}

首先，我們需要建立一個圖片容器，可以使用一個div元素，并給它一個類名為.img-wrapper。然后，我們將這個容器的max-width屬性設置為100%，overflow屬性設置為hidden。這樣，當圖片寬度大于容器寬度時，就會隱藏圖片的溢出部分，并自動縮放圖片尺寸以適應容器。

接下來，我們需要對圖片本身進行處理。使用CSS3中的新屬性，我們將圖片的寬度設置為100%，高度設置為auto。這樣，圖片的高度會自動按比例計算，并隨著寬度的變化而變化，從而實現圖片的不變形布局。

這樣，我們就成功地使用CSS3實現了淘寶圖片的不變形效果。使用這個方法，我們可以輕松實現響應式網頁設計，并讓用戶在不同尺寸的設備上獲得更好的瀏覽體驗。