在开发的过程,我们都会遇到的一个问题,设计稿给的宽高大小与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标签上:

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

Logo

前往低代码交流专区

更多推荐