如下所示：

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='http://www.4tl426be.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中注冊：

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.4tl426be.cn/bcjs/123.png'/> </div></template>

以上這篇vue實現圖片按比例縮放問題操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。