Css WooCommerce产品图片甚至不

我有一个WooCommerce商店，当查看所有产品/类别时，图像大小会导致所有内容都不均匀

我使用了硬裁剪和重新生成缩略图的方法来平衡它，但是它会刮去图像的左边缘和右边缘。（我的大多数图片都是风景画，所以这不太好。）

---

是否可以设置图像占位符大小，然后允许图像“适合”空间而不裁剪初始图像？因此，我的横向图像在其上方和下方添加了“空白”以使其成为方形？

最简单的方法是删除硬裁剪选项，然后在设置中设置允许的最大尺寸。剩下的你可以用HTML和CSS做如下事情：

.thumbnail_container {
    text-align: center;
    height: 100px;
    overflow: hidden;
}
.thumbnail_container img {
    display: block;
    max-height: 100px;
    width: auto;
}

如果图像太窄，无法容纳

缩略图\u容器

框，这将使图像居中，从而添加所需的空白。如果要在图像上使用边框或其他样式，应将这些样式应用于

缩略图\u容器

类，而不是图像本身。

---

当然，应该将

100px

的高度更改为图像上所需的（最大）高度。如果还需要将图像垂直居中，则需要添加更多的标记（HTML）和CSS。

如果缩略图已被裁剪，则可能还需要重新生成它们。有一个易于使用的插件：