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

Question

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

我不知道在哪里编辑产品图片网格大小。列表大小已增加但没有用，因为当有人打开产品时，默认视图是未增加的网格视图。虽然列表大小增加了，但除非有人不单击列表大小，否则有人看不到更大的图像，因为有人打开产品时的默认视图是网格视图。

如何在网格视图中增加图像大小？我正在使用 OC 3.0.2.0 的默认主题。

Answer 1

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

您可以通过查看 stylesheet.css 文件找到答案，并可能找到产品列表和产品网格部分的不同布局设置。

然后，您可以添加一些 min- 或 max-height/width 或者 'fixed' height/width image size 在正确的地方给各个部分赋值，看看它是否有效。如果没有设置最小值，响应函数仍然可以将图像的大小调整为较小的值，但不会调整为较大的值，并且仅当屏幕分辨率变小时。

我能为你做的就这些了，投入的时间只看复杂程度主题编码器工作。根据它的编码方式，它可能不是也可以，无需从根本上重写所涉及的部分。不要忘记先备份样式表！但别担心，你不能毁掉任何东西。并确保在测试结果之前始终首先重置整个缓存系统以及浏览器缓存。

此类样式表部分的示例：

/* 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 属性（来自 bootstrap）不允许图片大于产品包装盒： max-width: 100%;

网格视图中的产品框有一些像这样的列 class：

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

您可以从 twig 文件中删除那些 classes，如下所示：

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

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

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

底部 stylesheet.css 覆盖 bootstrap 列宽：

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

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

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

How to increase product image size in grid view in Opencart?

php

opencart