用到fiex弹性布局
效果:缩放时小黄圆点也跟着一起缩放

<!-- 灰色背景 --> <div class="boxImg" ref="cont" style="position: absolute; top: 0; left: 0"> <!-- 综合监控首页 --> <img class="topImg" src="./images/images/monitor.title.bg.png" alt=""> <div> <!-- 原图 --> <img class="contImg" src="./images/images/factory.plan.png" alt="" ref="conten"> <!-- 小圆点 --> <img class="Point-one" src="./images/images/monitor.state.w.png" ref="one" v-for="item in itme" :key="item.x" /> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | export default { data () { return { // 圆点的数量 itme: [ { // left值 x: 560, // top值 y: 600, }, { // left值 x: 624, // top值 y: 595, }, { // left值 x: 692, // top值 y: 595, }, { // left值 x: 555, // top值 y: 670, }, { // left值 x: 618, // top值 y: 680, }, { // left值 x: 689, // top值 y: 670, }, ], } }, mounted () { window.addEventListener( "resize" , () => { this .updateScaleRatio( this .$refs.conten, // 屏幕显示的宽度 window.innerWidth, // 屏幕显示的高度 window.innerHeight ); }); this .updateScaleRatio( this .$refs.conten, // 屏幕显示的宽度 window.innerWidth, // 屏幕显示高度 window.innerHeight ) }, methods: { updateScaleRatio (ImgObj, maxWidth, maxHeight) { var image = new Image(); //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响) image.src = ImgObj.src; // 用于设定图片的宽度和高度 var tempWidth; var tempHeight; if (image.width > 0 && image.height > 0) { //原图片宽高比例 大于 指定的宽高比例,这就说明了原图片的宽度必然 > 高度 if (image.width / image.height >= maxWidth / maxHeight) { if (image.width > maxWidth) { tempWidth = maxWidth; // 按原图片的比例进行缩放 tempHeight = (image.height * maxWidth) / image.width; } else { // 按原图片的大小进行缩放 tempWidth = image.width; tempHeight = image.height; } } else { // 原图片的高度必然 > 宽度 if (image.height > maxHeight) { tempHeight = maxHeight; // 按原图片的比例进行缩放 tempWidth = (image.width * maxHeight) / image.height; } else { // 按原图片的大小进行缩放 tempWidth = image.width; tempHeight = image.height; } } // 设置页面图片的宽和高 ImgObj.height = tempHeight; ImgObj.width = tempWidth; // 提示图片的原来大小 ImgObj.alt = image.width + "x" + image.height; } // <!-- 下面代码是等比例缩放的时候小圆点跟着移动,若不需要删除即可--> // 获取所有点位 let point = this .$refs.one; // 循环判断点位的位置 this .itme.forEach((itme, index) => { // x 除以 图片最大宽度 let left = itme.x / 1708; // y 除以 图片最大的高度 let top = itme.y / 961; // 小圆点的缩放比例 屏幕除以1920 let w = maxWidth / 1920; // this.$refs.one.width = 18 * w; // 小圆点基准值乘以小圆点的缩放比 point[index].width = 18 * w; // 获取每一个点位 let pointPosition = point[index]; // 让图片的宽度乘以比例 pointPosition.style.left = ImgObj.width * left + "px" ; // 让图片的高度乘以比例 pointPosition.style.top = ImgObj.height * top + "px" ; }); }, } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* 灰色背景 */ .boxImg { background-image : url ( './images/images/map.bg.jpeg' ); width : 100% ; height : 99.5% ; display : flex; justify- content : center ; flex- direction : column; align-items: center ; } .boxImg div { position : relative ; } /* 小黄圆点 */ .Point-one { position : absolute ; left : 630px ; top : 670px ; } /* 综合监控首页 */ .topImg { position : absolute ; top : 0 ; width : 100 vw; z-index : 1111 ; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~