淘寶是一個(gè)流行的在線購(gòu)物網(wǎng)站，在該網(wǎng)站的產(chǎn)品頁(yè)面上，您可以看到針對(duì)同一個(gè)產(chǎn)品的多張圖片。這些圖片使用CSS來(lái)進(jìn)行排布并形成一個(gè)多圖片展示的效果。

.taobao-img {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
overflow: hidden;
}
.taobao-img img {
max-height: 100%;
max-width: 100%;
transition: transform 0.2s ease-in-out;
}
.taobao-img img:hover {
transform: scale(1.1);
cursor: pointer;
}
.taobao-img img:active {
transform: scale(0.95);
}

代碼中，我們首先創(chuàng)建一個(gè)類名為“taobao-img”的div標(biāo)簽，用于包含所有的產(chǎn)品圖片。該div使用flex布局，并設(shè)置居中對(duì)齊方式和高度限制，以便避免圖片溢出。接下來(lái)，我們?yōu)槊總€(gè)圖片設(shè)置了一個(gè)類名，在CSS中進(jìn)行適當(dāng)?shù)臉邮皆O(shè)置。

我們?cè)O(shè)置了圖片的最大高度和最大寬度以確保尺寸在各個(gè)屏幕上一致。我們還使用了CSS的“transition”屬性，以在鼠標(biāo)懸停時(shí)為圖片添加0.2秒的放大效果。在鼠標(biāo)按下時(shí)，圖片會(huì)略微縮小，以提供反饋。

通過(guò)這些簡(jiǎn)單的CSS樣式，我們可以復(fù)制淘寶或其他在線商店中的多圖片展示功能。