1.html

通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸。外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸。一种是宽度大于高度的情况,一种是高度大于宽度的情况。

curSource.src是动态请求的img路径

<div style='width:1349px;height:909px;'>
<img :src="curSource.src" alt="" :class="isHeight ? 'hovImg' : 'verImg'">
<img ref='imgShow' :src="curSource.src" style="display:none">
<span v-if='infoState' class="info">加载失败,请刷新页面重试...</span>
</div>

2.methods中 使用图片加载完成时候的事件,来得到原始图片的宽高,在按比例设置显示图片的样式

this.$refs.imgShow.onload = () => {
if (this.$refs.imgShow.width / this.$refs.imgShow.height > 1349 / 909) {
this.isHeight = true
} else {
this.isHeight = false
}
this.spinShowTop = false
}

3.data中

data () {
return {
isHeight: false, // 控制图片的大小
curSourece.src,
}
}

4.style 一种是宽度大于高度的情况,一种是高度大于宽度的情况。

.hovImg{
width: 100%;
height: auto;
}
.verImg{
width: auto;
height: 100%;
}
05-11 20:01
查看更多