在vue中通过js动态控制图片按比列缩放

1.html

通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸。外层div是固定大小，因此，图片有两种情况去适应外部div的尺寸。一种是宽度大于高度的情况，一种是高度大于宽度的情况。

curSource.src是动态请求的img路径

<div style='width:1349px;height:909px;'>
  <img :src="curSource.src" alt="" :class="isHeight ? 'hovImg' : 'verImg'">
  <img  ref='imgShow' :src="curSource.src" style="display:none">
  <span v-if='infoState' class="info">加载失败，请刷新页面重试...</span>
</div>

2.methods中 使用图片加载完成时候的事件，来得到原始图片的宽高，在按比例设置显示图片的样式

this.$refs.imgShow.onload = () => {
  if (this.$refs.imgShow.width / this.$refs.imgShow.height > 1349 / 909) {
    this.isHeight = true
  } else {
    this.isHeight = false
  }
  this.spinShowTop = false
}

3.data中

data () {
  return {
    isHeight: false, // 控制图片的大小
    curSourece.src,
  }
}

4.style 一种是宽度大于高度的情况，一种是高度大于宽度的情况。

.hovImg{
  width: 100%;
  height: auto;
}
.verImg{
  width: auto;
  height: 100%;
}

 

转载于:https://www.cnblogs.com/wgl0126/p/11082853.html