我有一个客户，他的产品是他拍摄的照片。商店，然后（使用 Woo Commerce）显示图像的缩略图，当您单击时，您将获得完整尺寸。
问题是后端只有一个缩略图大小设置，并且它设置为水平图像 - 但有些图像是垂直的。
http://itestwebpageshere.biz/product-category/carribean/
如何独立调整垂直图像。即使您无法发布编码的解决方案，也欢迎提出想法。我已经为此绞尽脑汁了一段时间，似乎没有比重写 Woo Commerce 处理图像的方式更容易获得“垂直”选项的方法了。
所以这就是我的想法：
在 CSS 中，声明了产品图像的类：
width: 100%;
我将其更改为：
max-width: 100%;
修复背后的逻辑：
如果宽度为图像所在 div 元素的 100%，则水平图像的上限为最大值（在本例中为 220 像素），但垂直图像被拉伸到该宽度。Woocommerce 会自动缩放其高度以匹配，从而导致主题中断。如果我们将宽度切换为“自动”，那么图像将处于其自然宽度。这会导致主题再次中断，因为现在水平图像没有被限制在某个宽度（并且对于页面来说变得太宽）。
通过仅将最大宽度声明为 100%，我们做了两件事：我们将水平图像的宽度限制为它们所在的块元素的大小（220 像素）；我们让 CSS 自己整理 min-width。因为没有声明宽度或最小宽度，它们将被设置为“自动”。
这允许垂直图像位于其自然宽度，但将水平图像限制在框的宽度上，从而保持所有图像的缩放和我们的布局整洁和对齐。