Question

仅在Safari中进行缩放时遇到问题。图像看起来非常垂直拉伸。（见http://claudialimacher.com/gallery/zoom/2018-lazulian-reflections-zoom.html）

我缺少一个webkit修复程序吗？

HTML code：

<!-- start main image-->
<div class="col-xs-12 col-sm-12 col-md-12">
    <!-- start paste code A -->
    <h4><a href="../../index.html"><img src="../../imagebank/design/claudia-limacher-fine-art.png" alt="claudia limacher" width="300px" height="auto" /></a> &nbsp;|&nbsp; <span style="font-size: 1.2em; ">wonder </span>&nbsp;|&nbsp; 2018 &nbsp;|&nbsp; 200 cm X 150cm &nbsp;|&nbsp;- SOLD -&nbsp;|&nbsp; <a href="../../gallery-2018.html"><span style="font-size: 0.9em; font-weight: 700; ">BACK TO GALLERY PAGE&nbsp;<img src="b.png" /></span></a></h4><p>&nbsp;</p>
    <!-- end paste code A -->
</div>
<!-- end main image -->

<!-- start zoom window -->
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="img-zoom-container">
          <!-- start paste code B -->
          <img id="myimage" src="../2018/2018-wonder-full.png" width="600" height="auto">
          <!-- end paste code B -->
        </div>
    </div>
<!-- end zoom window -->

CSS

/*  GALLERY ZOOM */
* {box-sizing: border-box;}
.img-zoom-container {
 position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 100px;
height: 100px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;

}

在Safari中从img-zoom-result拉伸图像

0 个答案: