在現今的網站設計中，圖片展示已經成為了網站設計的核心之一，而CSS的使用也是現今網站設計的必備技術之一。那么我們今天就來談一談如何使用CSS來實現像淘寶圖片展示這樣的效果。

.img-wrap {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
.img-wrap .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}

如上面的示例代碼所示，我們使用了一個相對定位的容器（.img-wrap），然后通過設置padding-bottom為100%來讓容器的高度等于寬度，這樣就可以將圖片的寬高比保持一致。接著我們又使用絕對定位將圖片放到了容器的上方，并使用了cover來讓圖片填滿整個容器，同時使用center讓圖片居中顯示。

如果我們需要實現類似于淘寶圖片展示那樣的效果，只需要將容器的寬度設置成固定值（例如100px）即可。然后在圖片鏈接的后面添加一個寬度為100%的透明層，在這個透明層里面再嵌套一個div來顯示圖片標題和價格等信息。