小程序项目之图片不变形

一、问题

原图应该显示

实际上显示

图片变形了。

二、解决

我们的小程序图片规则已经定义好了宽高比例，需要运营童鞋按照比例给图。
这种情况下，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%;
}