OpenCart：删除内联样式答案

【问题标题】：OpenCart: Removing inline styleOpenCart：删除内联样式
【发布时间】：2014-01-20 04:18:36
【问题描述】：

在类别页面中，我的 css 样式被平台生成的内联样式覆盖。在 settings > system - images [tab] 下的管理区域中，您可以选择调整图像大小。例如，我将 Product Image List Size 调整为 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 生成此尺寸？有什么想法吗？

提前感谢您的帮助！

【问题讨论】：

从$product['thumb']这个-**400x400.jpg**中删除
$product['thumb'] 在外部调用它
@voodoo417 不清楚，但我认为他想将400x400.jpg 斜体化？ @user3077627 内联样式放在哪里？我在这里看到一个 img 没有任何内联 CSS 的标签。
$product['thumb'];正在打电话给localhost/THEME/image/cache/data/demo/w1-400x400.jpg
@user3077627 是的，我可以看到$product['thumb'] 包含http://localhost/THEME/image/cache/data/demo/w1-400x400.jpg 的url 字符串，但我没有看到任何内联CSS 样式。我认为这个问题需要一个更好的解释，包括一个更好的例子。

标签： php opencart

【解决方案1】：

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

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

要修复它，您可以尝试以下任一方法：

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

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

希望这会有所帮助！

【讨论】：