vue设置img大小的属性_vue - 宽图长图都铺满设计的窗口大小;动态设置高度
在开发的过程,我们都会遇到的一个问题,设计稿给的宽高大小与server返回的img可能并不符。例如:设计稿:80*120,但是server返回的img有200*80的,也有60*150的,而产品的同学要求无论什么样的图片,都不允许显示空白。这就需要获取图片的大小,如何获取呢?首先:创建img对象,待图片加载结束,获取图片的真实大小。代码: setHeight: function () {const
在开发的过程,我们都会遇到的一个问题,设计稿给的宽高大小与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标签上:
我是前端小菜鸟,有简单的方法欢迎大佬们指导呀!
更多推荐
所有评论(0)