商品详情页商品图片二倍放大

要实现商品详情页商品图片的二倍放大，可以通过以下步骤来实现：

1. 首先，需要在 HTML 中定义商品图片的标签，例如：

<img src="product.jpg" alt="Product Image" id="product-image">

2. 接下来，在 CSS 中定义该图片的样式，例如：

#product-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  cursor: pointer;
}

#product-image:hover {
  transform: scale(2);
  transition: transform 0.3s ease-in-out;
}

其中，`#product-image` 选择器用于选中商品图片的标签，`width: 100%;` 和 `height: auto;` 用于保证图片在不同尺寸的屏幕上可以正确显示，`max-width: 500px;` 用于限制图片的最大宽度，防止图片过于模糊。

`#product-image:hover` 选择器用于选中当鼠标悬停在商品图片上时的样式，`transform: scale(2);` 用于将图片放大到原来的两倍大小，`transition: transform 0.3s ease-in-out;` 用于添加一个平滑的过渡效果，使得放大的过程更加自然。

3. 最后，需要在 JavaScript 中添加一些代码，以确保图片在移动设备上也可以正确显示。可以使用以下代码：

var img = document.getElementById("product-image");
var width = img.offsetWidth;
var height = img.offsetHeight;
img.style.maxWidth = width + "px";
img.style.maxHeight = height + "px";

这段代码用于获取图片的实际宽度和高度，并将其设置为图片的最大宽度和最大高度，这样可以确保图片在移动设备上不会超出屏幕范围。