如何在Opencart的网格视图中增加产品图像的大小？

Question

我无法增加产品gridview图像的大小。虽然我通过转到Admin-> Extensions-> Extensions-> Themes增加了列表视图的图像大小，从而编辑了默认商店主题。在这里，我可以编辑产品图片列表大小。但是这里没有提及产品图像网格大小。

我不知道在哪里编辑产品图像网格尺寸。列表大小已增加，但没有用，因为当有人打开产品时，默认视图是“网格视图”，不会增加。尽管“列表大小”已增加，但是除非有人不单击“列表大小”，否则某人看不到更大的图像，因为有人打开产品时的默认视图是网格视图。

如何在网格视图中增加图像尺寸？我在OC 3.0.2.0中使用默认主题。

Answer 1

嗯，但是opencart不提供任何其他图像设置。

您可以通过查看stylesheet.css文件来查找，并可能为product-list和product-grid部分找到不同的布局设置。

然后，您可以将一些最小或最大高度/宽度或一个'fixed' height / width图像大小值添加到正确位置的各个节中，以查找是否作品。如果未设置最小值，则响应功能仍然可以将图像的大小调整为较小的值，但只有在屏幕分辨率变小时，才可以将图像的大小调整为较小的值。

这就是我能为您做的，而投入的时间仅取决于复杂程度主题编码器有效。而且取决于它的编码方式，可能不是在没有对相关部分进行根本性重写的情况下，也可以实现。不要忘记先制作样式表的备份副本！但请放心，您不能毁掉任何东西。并确保在测试结果之前，始终先重置整个缓存系统以及浏览器缓存。

这样的样式表部分的示例：

/* product list */
.product-thumb {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}
.product-thumb .image {
    text-align: center;
    margin: 10px;
}

.product-thumb .image a:hover {
    opacity: 0.8;
}
.product-thumb .image img {
    margin-left: auto;
    margin-right: auto;
}
.product-grid .product-thumb .image {
    float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
    float: left;
    padding: 0 15px;
}
}
.product-thumb h4 {
    font-weight: bold;
}
.product-thumb .caption {
    padding: 0 20px;
    min-height: 60px;
}
.product-list .product-thumb .caption {
    margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
    min-height: 210px;
    padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
    min-height: 0;
    margin-left: 0;
    padding: 0 10px;
}
.product-grid .product-thumb .caption {
    min-height: 0;
}
}

Answer 2

请注意，有一个CSS属性（来自引导程序），该属性不允许图像大于产品包装盒：max-width: 100%;

网格视图中的产品框具有某些col类，如下所示：

<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">

您可以从树枝文件中删除这些类，如下所示：

<div class="product-layout product-grid">

或者您可以添加此CSS代码：

.product-grid {
  width: auto;
  float: none;
  clear: none;
}

在stylesheet.css的底部以覆盖引导程序列的宽度：

catalog/view/theme/default/stylesheet/stylesheet.css

然后您可能需要清除主题缓存和浏览器缓存才能看到更改。