vue实现图片按比例缩放问题操作

如下所示：

getImg(src){
 var img_url =src
 var img = new Image()
 img.src=img_url
 this.pictureHeight.height = Math.ceil(img.height/img.width * 460)+'px'
},
//首先通过这个方法算出图片的高度/宽度比，460是我设置的宽度，计算得出需要的高度，然后修改容器的高
//度，图片通过height:100%;width:100%撑开，这样图片就不会失真了

vue里面还有一个问题，如果容器只是div的话，修改容器高度，非常简单，如果容器是一个element的插件的话，一般容器的样式都可以通过:style="styleModel"来绑定一个data中的属性styleModel:{height:100px;}这样的方式来修改，

当然如果遇到一些比较复杂的样式调整，也可以通过$refs来修改样式，，但是这样又会出现一个问题，就是$refs定位到的ref属性必须要组件完全加载完成后才能显示出来，所以一般会用this.$nextTick(function(){})的包装起来。

这个方法包装起来后的好处是，会在DOM更新完成后执行这里面的方法，这样就不用担心$refs获取不到的问题了。

  this.$nextTick(function(){
  // this.$refs.test.$el.childNodes[0].style.height=this.pictureHeight.height
   document.getElementsByClassName('el-carousel__container')[0].style.height=this.pictureHeight.height
  })

//现在就是通过这两种比较通用的js方式来操作属性了

补充知识：vue实现图片放大的方法

一、v-viewer插件

首先，用命令行安装v-viewer插件：

npm install v-viewer --save

然后，在main.js中注册v-viewer插件，代码如下：

// 实现图片点击放大
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
 Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

注册完成后，就可以在组件中使用v-viewer插件了：

<template>
  <!-- imgArr是图片地址的数组，例： ['1.png','2.png'] -->
 <viewer :images="imgArr">
 <img v-for="src in imgArr" :src="src" :key="src" width="200">
 </viewer>
</template>

二、vue-directive-image-previewer插件

用命令行安装vue-directive-image-previewer插件：

npm install vue-directive-image-previewer -D

在main.js中注册：

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

在组件中使用vue-directive-image-previewer插件：

<template>
 <div>
  <img v-image-preview src="123.png"/>
 </div>
</template>

以上这篇vue实现图片按比例缩放问题操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现PC端分辨率适配操作

    依赖 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之

  • vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

    如下所示: 这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) 1.提取出压缩方法,放在公共方法.js文件里 /** 图片压缩,默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数,base64的字符串数据 */ export function compress(fileObj, cal

  • vue实现点击图片放大效果

    本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view" @click="bigImg"> <!-- 遮罩层 --> <div class="img

  • vue中实现图片压缩 file文件的方法

    项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法 将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma

  • vue实现图片按比例缩放问题操作

    如下所示: getImg(src){ var img_url =src var img = new Image() img.src=img_url this.pictureHeight.height = Math.ceil(img.height/img.width * 460)+'px' }, //首先通过这个方法算出图片的高度/宽度比,460是我设置的宽度,计算得出需要的高度,然后修改容器的高 //度,图片通过height:100%;width:100%撑开,这样图片就不会失真了 vue里面还

  • JS图片等比例缩放方法完整示例

    本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JavaScript实现网页图片等比例缩放实现代码及调用方式

    在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

  • C#图片按比例缩放实例

    本文实例为大家分享了C#图片按比例缩放的具体代码,供大家参考,具体内容如下 工具类代码: using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.Linq; using System.Text; using System.Threading.Tasks; names

  • 微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放. 上代码: 1.index.wxml <!--index.wxml--> <

  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

  • 图片按比例缩放函数

    以下是程序代码: <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD,iwidth,iheight){    //参数(图片,允许的宽度,允许的高度)    var image=new Image();    image.src=ImgD.src;    if(image.width>0 && image.height>0){  

  • Android开发之imageView图片按比例缩放的实现方法

    本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"

  • Android图片等比例缩放和填充屏幕效果

    本文实例为大家分享了Android图片等比例缩放和填充屏幕的具体代码,供大家参考,具体内容如下 第一种方法:在ImageView的t同事设置两个属性 android:adjustViewBounds="true" android:scaleType="fitXY 第二中方法:用IamgeView的 android:scaleType  设置属性的时候  填充屏幕出现的各种问题 /** * 将图片等比例缩放 setAdjustViewBounds setMaxWidth set

  • php实现图片等比例缩放代码

    新建文件index.php,需要在统计目录下有个图片为q.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="q.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h); $img=imagecreatefromjpeg($fi

随机推荐