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%;
    }
  • 相关阅读:
    enyo学习之enyo.Object类
    java.lang.Object
    Nginx转发匹配规则
    工具类Redis工具类
    Redis从0到精通Redis.conf详解
    工具类类型转换器
    Docker入门到精通
    Redis从0到精通Jedis
    工具类字符集工具类
    Spock高质量单元测试实操篇
  • 原文地址:https://www.cnblogs.com/wgl0126/p/11082853.html
Copyright © 2011-2022 走看看