如下所示：

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實現圖片按比例縮放問題操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。