CSS（Cascading Style Sheets）是網(wǎng)頁設(shè)計中非常重要的一部分，可以用來美化網(wǎng)站的用戶界面并展示所需的商品信息。其中，商品詳情圖展示是一個非常關(guān)鍵的部分，下面我們來看看如何使用CSS展示商品詳情圖。

/* CSS 代碼開始 */
.product-img {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.product-img img {
width: 400px;
height: auto;
object-fit: contain;
margin: 0 10px;
}
/* CSS 代碼結(jié)束 */

首先，我們需要一個包含所有商品圖片的容器。在CSS代碼中，我們使用class名為“product-img”的div來作為容器，并設(shè)置它為flex布局，以便實現(xiàn)居中對齊和水平排列的效果。

接下來，我們需要設(shè)置每個商品圖片的樣式。在CSS代碼中，我們使用選擇器“product-img img”來選擇所有在“product-img”容器中的img元素，并設(shè)置其最大寬度為400px，高度自動調(diào)整，同時使用“object-fit”屬性將圖片居中填充并保持其原始比例，最后設(shè)置圖片與容器之間的間距為10px。

通過上述CSS設(shè)置，我們可以靈活地展示商品詳情圖，使其更加美觀和易于瀏覽。更重要的是，這種展示方式可以隨著窗口大小的變化而自適應(yīng)，確保在不同設(shè)備上都能夠正常地展示商品詳情圖。