WooCommerce网站亚马逊产品图片CSS适配样式咨询

以下CSS样式可完美实现你要求的图片适配效果，直接针对WooCommerce产品图片容器和图片设置即可：

核心适配方案（现代浏览器推荐） #

/* 自定义产品图片容器样式 */
.product-image-container {
  width: 350px; /* 替换为你实际的容器宽度 */
  height: 450px; /* 替换为你实际的容器高度 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; /* 可选：填充空白区域的背景色 */
}

/* 图片适配规则 */
.product-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

对应需求说明： #

• 要求1：max-height: 100%会强制高度超过容器的图片等比例缩小，直到高度匹配容器，同时max-width:100%确保缩放后宽度不会超出容器边界。
• 要求2：宽于容器的图片会被max-width:100%等比例缩小至容器宽度，display: flex + align-items: center自动实现图片上下居中，无需手动计算边距。
• 要求3：高度小于容器的图片，同样通过flex布局的align-items: center实现上下居中，容器背景色填充上下空白区域，视觉效果统一。

WooCommerce原生类适配（直接替换默认容器） #

如果不需要自定义容器类，可直接针对WooCommerce默认的产品图片容器样式修改：

.woocommerce-product-gallery__image {
  width: 350px;
  height: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce-product-gallery__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

旧浏览器兼容方案（支持IE等） #

若需兼容不支持flex和object-fit的旧浏览器，使用绝对定位方案：

.product-image-container {
  width: 350px;
  height: 450px;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
}

.product-image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

内容的提问来源于stack exchange，提问作者Hassan Maqbool