Woocommerce产品图库图片显示异常及全屏完整展示需求咨询

嘿，我来帮你搞定这个WooCommerce产品图库的问题！你遇到的网格模式下图片模糊裁切、横图被隐藏，还有Divi没对应配置的情况，咱们一步步来解决：

一、先解决图片模糊和裁切的问题 #

• 首先检查WooCommerce原生设置：打开后台的「WooCommerce → 设置 → 产品 → 显示」，这里能调整产品相关的图片尺寸。把「产品缩略图」「产品图片」「图库缩略图」的尺寸适当调大（比如设成1200×1200，根据你的需求来），然后把缩略图的「裁剪」勾选去掉，这样图片就会按原始比例显示，不会被硬裁切了。
• 别忘了重新生成缩略图：改完尺寸后，用「Regenerate Thumbnails」这类插件批量重新生成所有产品图片的缩略图，不然旧的小尺寸图片还是会显示模糊。
• 检查Divi的覆盖设置：进「Divi → 主题选项 → WooCommerce」看看有没有单独的图片尺寸设置，如果有的话，同样把裁切选项关掉，尺寸调至合适大小。

二、实现全屏垂直展示不同方向的图片（包括横图） #

因为Divi自带的设置满足不了需求，咱们用自定义CSS来搞定，把下面的代码加到你的主题自定义CSS里（「外观 → 自定义 → 额外CSS」或者Divi主题选项里的自定义CSS区域）：

方案1：全屏宽度+自适应高度（保持图片比例） #

/* 让产品图库容器占满屏幕宽度 */
.single-product .woocommerce-product-gallery {
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* 图片自适应容器，不裁切，保持原始比例 */
.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 调整图库导航的位置，避免被遮挡 */
.single-product .woocommerce-product-gallery__nav {
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
}

方案2：全屏高度+居中展示（每张图占满屏幕高度） #

如果想要每张图片都占满屏幕垂直空间，用这个代码：

/* 让图库图片容器占满屏幕高度，居中展示图片 */
.single-product .woocommerce-product-gallery__image {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 图片自适应屏幕高度，保持比例，不裁切 */
.single-product .woocommerce-product-gallery__image img {
    max-height: 100vh;
    width: auto !important;
    object-fit: contain !important;
}

加完代码后，记得清除网站缓存和浏览器缓存，刷新页面就能看到效果啦。如果还是有问题，先暂时禁用一下图片优化类的插件，看看是不是插件压缩过度导致的模糊；要是还有冲突，就把CSS选择器写得更具体一点，比如加上Divi模块的类名。

备注：内容来源于stack exchange，提问作者TheNikCD