如下所示：

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’},//首先通過這個(gè)方法算出圖片的高度/寬度比，460是我設(shè)置的寬度，計(jì)算得出需要的高度，然后修改容器的高//度，圖片通過height:100%;width:100%撐開，這樣圖片就不會(huì)失真了

vue里面還有一個(gè)問題，如果容器只是div的話，修改容器高度，非常簡(jiǎn)單，如果容器是一個(gè)element的插件的話，一般容器的樣式都可以通過:style='styleModel'來綁定一個(gè)data中的屬性styleModel:{height:100px;}這樣的方式來修改，

當(dāng)然如果遇到一些比較復(fù)雜的樣式調(diào)整，也可以通過$refs來修改樣式，，但是這樣又會(huì)出現(xiàn)一個(gè)問題，就是$refs定位到的ref屬性必須要組件完全加載完成后才能顯示出來，所以一般會(huì)用this.$nextTick(function(){})的包裝起來。

這個(gè)方法包裝起來后的好處是，會(huì)在DOM更新完成后執(zhí)行這里面的方法，這樣就不用擔(dān)心$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 }) //現(xiàn)在就是通過這兩種比較通用的js方式來操作屬性了

補(bǔ)充知識(shí)：vue實(shí)現(xiàn)圖片放大的方法

一、v-viewer插件

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

npm install v-viewer --save

然后，在main.js中注冊(cè)v-viewer插件，代碼如下：

// 實(shí)現(xiàn)圖片點(diǎn)擊放大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' }});

注冊(cè)完成后，就可以在組件中使用v-viewer插件了：

<template> <!-- imgArr是圖片地址的數(shù)組，例： [’1.png’,’2.png’] --> <viewer :images='imgArr'> <img v-for='src in imgArr' :src='http://www.aoyou183.cn/bcjs/src' :key='src' width='200'> </viewer></template>

二、vue-directive-image-previewer插件

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

npm install vue-directive-image-previewer -D

在main.js中注冊(cè)：

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='http://www.aoyou183.cn/bcjs/123.png'/> </div></template>

以上這篇vue實(shí)現(xiàn)圖片按比例縮放問題操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。