将 Woocommerce 产品类别缩略图大小设置为与产品大小不同

Question

我需要帮助更改我的 WordPress 默认图像大小中的一些设置。我一直在到处寻找答案，但找不到任何好的答案。

让我首先定义我在说什么： -产品照片：目录视图中的常规产品照片。 - 产品类别照片：这是特定产品类别的照片（见下面的照片 1）（例如脱发治疗），点击后会带您进入该类别下的多个产品页面（例如脱发产品）。

现在看起来产品图像的大小（在目录视图中）等于我的产品类别缩略图大小。这看起来不太好，因为产品照片可以是方形和小尺寸，但类别照片应该更像是矩形。我尝试通过转到 CSS 并更改宽度来更改类别缩略图大小，如下所示：

.categories-style-default .cat-design-default .category-content .product-category-thumbnail img {
width: 350px !important
}

类别的图像块更改为 350 像素，图像刚刚被拉伸，但仍使用调整后的图像默认大小（230 像素宽度，即产品图像默认的宽度）。

你能帮我解决这个问题吗？我不是编码专家，但如果你给我步骤，我可以做到！

这是我的类别缩略图现在的样子：

它应该是这样的：

这是类别图片的代码：

这是 WooCommerce 中产品的默认尺寸：

谢谢！！

Answer 1

使用对象拟合。 CSS object-fit 属性用于指定如何调整 an 的大小以适应其容器。

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}