Question

在类别页面中，我的css样式被平台生成的内联样式覆盖。在设置＆gt;下的管理区域中system - images [tab] 您可以选择调整图像大小。例如，我将产品图像列表大小重新调整为400 x 400，以获得相同的效果但这使得无法为响应性设置样式，因为它会生成如下的URL：

http://localhost/THEME/image/cache/data/demo/w1-**400x400.jpg**

生成此代码的代码位于 root / catelog / view / theme / template / product / category.tpl

<img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" class="" /></a>

如何阻止Opencart生成此大小？有什么想法吗？

先谢谢你的帮助！

Answer 1

您面临的问题不是内联样式覆盖css规则，因为默认情况下，OpenCart css文件不会为类别页面中图像的宽度和高度设置css属性。

OpenCart会根据您在管理员中设置的内容（在您的情况下为400x400）自动调整图像大小。由于没有css规则，因此显示的尺寸将是图像尺寸。

要解决此问题，您可以尝试以下任一方法：

在主css文件中，查找.product-list .image img并添加带有百分比值的width和height标记。由于您提到您正在尝试获取响应式网站，因此您可能需要为不同的屏幕大小设置单独的css文件。你可能面临的问题是，如果你要将图像大小调整为400x400像素，但你的css定义是将图像放大到更大的尺寸（比如600x600像素），你会得到一个看起来像低分辨率的像素化图像。要修复它，请查看第二个选项。
OpenCart调整图像大小以增强性能并保存在带宽上。在控制器文件中目录/控制器/产品/ category.php，约213行你会请参阅以下行：
```
$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'),
```
$这 - ＆GT; config-＆GT;获得（ 'config_image_product_height'））;

这是告诉OpenCart将图像大小调整为的代码您在管理员设置中定义的尺寸。如果你想要一个响应宽度和高度，您可以检测用户的设备（使用像MobileDetect http://mobiledetect.net/这样的开源包并根据使用的设备调整调整尺寸。
- 通过动态调整大小，您可以防止图像像素化，假设您的原始图像大于请求的大小，同时提高性能并节省带宽。

希望这有帮助！