前端实现图片放大缩小，图片初始化比例和容器等比宽

本文链接：https://blog.youkuaiyun.com/overdose__/article/details/135838322

本文介绍了如何使用Vue.js和ElementUI库在网页中实现图片加载后根据用户操作的滑块调整大小，包括watch组件监听滑块值变化，以及计算和设置图片的实际显示尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术：vue.js element ui

✨代码

<template>
  <div class="img_wrapper" ref="imgWrapper">
    <img
      @load="handleImgLoad"
      src="@/assets/images/testImg.jpg"
      alt="测试图片"
      :style="{
        width: imgCurWidth + 'px',
        height: imgCurHeight + 'px'
      }"
      class="scaleImg"
    />

    <el-slider
      class="elSliderStyle"
      v-model="scaleValue"
      :format-tooltip="formatTooltip"
    ></el-slider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scaleValue: 100,
      imgCurWidth: 0,
      imgCurHeight: 0,
      imgRealWidth: 0,
      imgRealHeight: 0,
      isFirstEnter: true
    }
  },
  watch: {
    scaleValue(val, oldVal) {
      const imgCurWidth = (this.imgRealWidth * val) / 100
      const imgCurHeight = (this.imgRealHeight * val) / 100
      this.imgCurWidth = imgCurWidth
      this.imgCurHeight = imgCurHeight
    }
  },
  methods: {
    formatTooltip(val) {
      return val + '%'
    },
    handleImgLoad() {
      let image = new Image()
      image.onload = () => {
        const imgCurWidth = image.width * (this.scaleValue / 100)
        const imgCurHeight = image.height * (this.scaleValue / 100)
        // 图片当前宽高
        this.imgCurWidth = imgCurWidth
        this.imgCurHeight = imgCurHeight
        // 图片真实宽高
        this.imgRealWidth = image.width
        this.imgRealHeight = image.height

        this.$nextTick(() => {
          let wrapperWidth = this.$refs.imgWrapper.clientWidth
          if (this.isFirstEnter) {
            this.scaleValue = Math.floor(
              (wrapperWidth / this.imgRealWidth) * 100
            )
            this.isFirstEnter = false
          }
        })
      }
      image.src = require('../src/assets/images/testImg.jpg')
    }
  }
}
</script>

<style lang="scss" scoped>
.img_wrapper {
  width: 600px;
  height: 600px;
  overflow: auto;
  border: 4px solid pink;
  position: relative;
  box-sizing: border-box;
  .scaleImg {
    border: 2px solid #000;
    box-sizing: border-box;
  }
  .elSliderStyle {
    width: 100px;
    position: absolute;
    top: 0;
    right: 40px;

    z-index: 99;
  }
}
</style>