图像在 woocommerce 产品图像容器 (CSS) 内放大

Question

我正在使用 WordPress 和 woocommerce 插件开发在线商店。我在调整图像大小时遇到​​了问题。所以我决定使用额外的 CSS 强制商店页面内的图像显示如下：

.products ul li.product .btWooShopLoopItemInner .bt_bb_image img, ul.products li.product .btWooShopLoopItemInner 
.bt_bb_image img{
  display: block;
  max-width:250px;
  max-height:250px;
  width: auto;
  height: auto;
    
}

强制图像以我指定的宽度和高度显示效果很好，但现在的问题是，如果我放置任何大于上面高度和宽度的图像，它会显示为放大的图片，它不会完全显示.

我尝试使用缩放来缩小图片，但它减小了整个容器的大小。任何想法完全显示图片而不自动放大并且不调整原始图片的大小？

Answer 1

我找到了答案。 WooCommerce 会自动裁剪图像（而不是放大图像）。为了禁用裁剪图像选项：

• 转到外观 > WooCommerce。
• 点击产品图片。
• 选择未裁剪。

假设您使用 CSS 指定任何尺寸，图像将完全显示在具有指定尺寸的产品容器内。