vue设置img大小的属性_vue - 宽图长图都铺满设计的窗口大小；动态设置高度

在开发的过程，我们都会遇到的一个问题，设计稿给的宽高大小与server返回的img可能并不符。

例如：设计稿：80*120，但是server返回的img有200*80的，也有60*150的，而产品的同学要求无论什么样的图片，都不允许显示空白。

这就需要获取图片的大小，如何获取呢？

首先：创建img对象，待图片加载结束，获取图片的真实大小。

代码： setHeight: function () {

const that = this;

const img = new Image();

let w;

let h;

if (this.data.photoCover) {

img.src = this.data.photoCover;

img.onload = function () {

w = img.width;

h = img.height;

console.log(w / h);

if (w / h > 0.74) {

that.imgH = 1.87 + 'rem';

} else {

that.imgH = 1.4 * h / w + 'rem';

}

};

}

},

然后将imgH动态绑定的img标签上：

我是前端小菜鸟，有简单的方法欢迎大佬们指导呀！