如何用Vue实现图片按比例自适应缩放功能？

本文共计668个文字，预计阅读时间需要3分钟。

以下是对给定内容的简化

plaintext函数 getImg(src) 接收一个图片源地址 src。它创建一个新的 Image 对象，设置图片的 src 属性为 src。然后计算图片的高度，使其与宽度按 460 像素宽的比例放大。

如下所示：

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获取不到的问题了。