防止WooCommerce目录图像调整大小

Question

我在Zurb Foundation 5.X中使用WooCommerce 2.X.这是我的基本布局在桌面上的样子：

......我很好。问题是，在视口大小调整后，产品图像会缩小，而不是在彼此之间折叠，从而导致像这样的挤满，丑陋的布局：

这是“开箱即用”代码的输出。

我没有修改content-product.php或woocommerce.css。当我修改content-product.php以在“large-3 columns”中包装循环的每次迭代时 - 由于我们使用的是Foundation，人们认为这将是正确的解决方案 - 输出变为：

在我看来，

元素正在调整其各自元素的22.05％，正如下面的CSS声明：

/* Product loops */

.products ul, ul.products {
    margin: 0 0 1em;
    padding: 0;
    list-style:none outside;
    clear:both;
    .clearfix();
    li {
        list-style:none outside;
    }
}

ul.products {
    li.product {
        float:left;
        margin: 0 3.8% 2.992em 0;
        padding: 0;
        position: relative;
        width: 22.05%;
        margin-left: 0;
        a img {
            width: 100%;
            height:auto;
            display:block;
            margin: 0 0 8px;
            .box_shadow(0,1px,2px,0,rgba(0,0,0,0.3));
            .transition();
        }
    }
    li.first {
        clear:both;
    }
    li.last {
        margin-right: 0;
    }
}

无论我如何修改图像大小百分比，我都无法增加它们的大小。最终，我希望我的移动布局看起来像一个漂亮的，堆叠的，流畅的布局，如下所示：

似乎很容易，但我在这里，5个小时，之后没有爱。任何帮助非常感谢！