图片等比例缩放，元素位置不变

　　　用到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>

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";
      });
    },
  }
}

　　

/* 灰色背景 */
.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: 100vw;
  z-index: 1111;
}