溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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的插件的話，一般容器的樣式都可以通過:來綁定一個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如何實現圖片按比例縮放的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
