仅在img元素上启用PInch缩放

Question

我在ipad上缩放图片时遇到了问题(特别是在chrome中)。我在网上找到了大量的解决方案，但没有一个对我有效。我已经把viewport的meta标签改成了“用户可伸缩的”，但它不适用于chrome，只适用于safari。我知道这是可以做到的，因为我在MM Lafleur的网站上看到过(链接如下)。

最好是我喜欢它，所以图像只是放大到位，而不是整个网站，但我会接受任何解决方案在这一点上。有什么建议吗？

https://mmlafleur.com/shop/rebecca-black

Answer 1

添加这个css就完成了.

.product-detail-main-container:hover {
    background-size: auto 170% !important;
}

.product-detail-main-container {
    transition: 0.2s all;
    background-size: auto 100% !important;
    background-repeat: no-repeat;
    pointer-events: none;
}

.product-detail-main-container .product-detail-zoom-area {
    pointer-events: auto;
}