如何避免使用 website_multi_image_zoom 模块拉伸图像？答案

【问题标题】：How to avoid stretched image with website_multi_image_zoom module?如何避免使用 website_multi_image_zoom 模块拉伸图像？
【发布时间】：2017-01-10 21:39:16
【问题描述】：

我们使用 Odoo 8。

我已经安装了 website_multi_image_zoom 模块，以便在前端的产品页面上显示多张图片。

模块现在正在工作。但通常主图像会被拉伸。

我们怎样才能避免这种情况？

【问题讨论】：

你能分享你的 HTML 和 CSS 吗？

标签： css image odoo-8

【解决方案1】：

固定的宽度和高度不适用于每个图像比例。在那个 img 元素上尝试使用固定的像素宽度，或 width: 100%;然后使用高度：自动；。这样，不同的图像将保持其真实比例，并且仍然适合容器的宽度。

如果这不起作用，那么您可以尝试固定容器大小并使用背景图像包含或覆盖，如此处所述https://css-tricks.com/almanac/properties/b/background-size/

【讨论】：

感谢您的回答。我会分析它，我很快就会回来。

【解决方案2】：

我已经在 Odoo 8 的模块 website_multi_image_zoom 的文件 multizoom.js 中注释了这一行。

//$imgObj.attr('src', this.src).css({width: w || options.width || this.width, height: (h = +(h || options.height || this.height))});

此行在加载时为主图像设置了固定的高度和宽度。

现在，图像没有被拉伸。

谢谢大家

【讨论】：