一、问题
原图应该显示
实际上显示
图片变形了。
二、解决
我们的小程序图片规则已经定义好了宽高比例,需要运营童鞋按照比例给图。
这种情况下,image标签用mode='widthFix'属性非常合适
<image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image>
三、扩展
圆角设置,不是给image设置圆角的,外面又加了一层view容器,根据ui图的宽高,
设置view宽高,并设置border-redius。里面图片仅保持不变形,适应外层容器。
<view class="img-c">
<image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image>
</view>
.img-c{
display: block;
position: relative;
font-size: 0;
line-height: 0;
height: 376rpx;
border-radius: 12rpx;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.img-c image {
width: 100%;
}