jquery - 提升缩放中的 zoomContainer 距右侧有一个边距

Question

我在我的网站的类别页面中有一个产品列表。我想为此页面中的每个产品设置提升缩放。我编写了以下代码：

  <div class="col-6 col-md-4 col-lg-3 mt-2">
                            <div itemscope="" itemtype="https://schema.org/Product" class="card shadow-sm rounded-0 position-relative">
                      <a class="mb-auto mt-auto align-self-center" href="">
                          <div class="img-container">
                                 <img itemprop="image" loading="lazy" title="" src=".../1156/thumbnail/1.jpg" data-zoom-image=".../1156/thumbnail/size_600/1.jpg" class="px-2 img-fluid img-thumbnail rounded-0 boredr-0 p-0 product-img w-100">
                          </div><span class="position-absolute end-0 badge bg-gray rounded-0 fontssize12 blue-carpet apptitle">applid</span>
                          </a>
                         <div class="d-flex flex-column  px-2  w-100 mt-auto">
                                    <div class="float-start fontssize12 title-color">
                                     <a itemprop="name" style="text-decoration:none;color:black;" href=""</a></div>
</div>
                                </div>
                            </div>

每个产品的顶部代码重复。这是我的缩放代码：

    $(document).ready(function () {
            $(".product-img").elevateZoom({
                 zoomType   : "inner"
            });
})
        

我的问题是，当我将鼠标悬停在产品上时，zoomcontianer 与右侧有距离。我在这张照片中用红色表示距离：

我认为距离的一部分是图像中的px类，但我删除了它但没有解决。