CSS（Cascading Style Sheets）是网页设计中非常重要的一部分，可以用来美化网站的用户界面并展示所需的商品信息。其中，商品详情图展示是一个非常关键的部分，下面我们来看看如何使用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 代码结束 */

首先，我们需要一个包含所有商品图片的容器。在CSS代码中，我们使用class名为“product-img”的div来作为容器，并设置它为flex布局，以便实现居中对齐和水平排列的效果。

接下来，我们需要设置每个商品图片的样式。在CSS代码中，我们使用选择器“product-img img”来选择所有在“product-img”容器中的img元素，并设置其最大宽度为400px，高度自动调整，同时使用“object-fit”属性将图片居中填充并保持其原始比例，最后设置图片与容器之间的间距为10px。

通过上述CSS设置，我们可以灵活地展示商品详情图，使其更加美观和易于浏览。更重要的是，这种展示方式可以随着窗口大小的变化而自适应，确保在不同设备上都能够正常地展示商品详情图。