<!--
1、原图宽高比例=缩略图宽高比=放大镜的宽高比
2、大放大镜与小放大镜的倍数=原图与缩略图的倍数
3、默认两个放大镜与图片都是左上角重叠
4、原图相对于小放大镜反方向移动相应倍数的距离
-->
以下引入的是同一张图片,一个正常大小一个缩小三倍
<div class="wrapper">
<!-- 小图:640*400,缩小3倍 -->
<div class="little">
<img src="./imgs/xhr.jpg" alt="">
<!-- 放大镜:320*200 -->
<div class="mark"></div>
</div>
<!-- 大放大镜 -->
<div class="great">
<!-- 大图:1920*1200 -->
<img src="./imgs/xhr.jpg" alt="">
</div>
</div>
<style>