css - 如何禁用我的产品图片的缩放效果？

Question

我正在使用 Weebly 创建一个在线商店，使用模板并遇到了我不喜欢的东西。每次用户点击产品时，产品页面就会出现，如果您将鼠标悬停在产品图像上，则会初始化缩放功能。如何禁用此效果？

我有一种感觉，它很简单，比如 display:none; 但我似乎无法弄清楚哪个类或与之相关的任何东西。

Answer 1

简单的方法是通过 CSS 隐藏悬停时放置在图像上的元素：

.cloud-zoom-big,
#cloud-zoom-big {
  display: none !important;
}

或者

.mousetrap {
  display: none !important;
}

更好的方法是禁用 JavaScript，即计算效果。它位于http://cdn2.editmysite.com/js/site/commerce-core.js文件开头的您的位置。但是这个文件被最小化了，所以很难删除相关代码。

Answer 2

无需进行任何自定义代码更改。

缩放将基于您上传的图像的大小。因此，例如，您的图像是 300 像素 x 300 像素，将不会进行缩放。缩放从大约 640 像素开始。因此，只需确保您的图像小于 640 像素。

注意：如果您的图像是 3000 x 3000 像素，那么缩放效果会很棒！位于中间某处的图像将具有大约一半的缩放量。