zoukankan      html  css  js  c++  java
  • 在vue中通过js动态控制图片按比列缩放

    1.html

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

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

    <div style='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{
       100%;
      height: auto;
    }
    .verImg{
       auto;
      height: 100%;
    }
  • 相关阅读:
    【LG3231】[HNOI2013]消毒
    【LG3230】[HNOI2013]比赛
    【LG3236】[HNOI2014]画框
    【BZOJ3142】[HNOI2013]数列
    【BZOJ2395】[Balkan 2011]Timeismoney
    【CF613D】Kingdom and its Cities
    【LG4103】[HEOI2014]大工程
    【LG3320】[SDOI2015]寻宝游戏
    【LG4841】城市规划
    【CF960G】Bandit Blues
  • 原文地址:https://www.cnblogs.com/wgl0126/p/11082853.html
Copyright © 2011-2022 走看看