效果图:限制最大宽度和最大高度实现图片自适应
HTML
<image class="img"
:mode="imagesMode"
:lazy-load="true"
src="图片url"
@load="onImageLoad"/>
script
data() {
return { imagesMode: 'widthFix' // 图片适应方式 }
},
methods: {
// 图片宽高自适应
onImageLoad(event) {
console.log(event);
if (event.detail.width < event.detail.height) {
// 如果是竖屏图则改变图片适应模式
this.imagesMode = 'heightFix';
}
}
}
CSS
.img {
max-width: 240px;
max-height: 240px;
border-radius: 4px;
}