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