小程序項目之圖片不變形

一、問題

原圖應該顯示

實際上顯示

圖片變形了。

二、解決

我們的小程序圖片規則已經定義好了寬高比例，需要運營童鞋按照比例給圖。
這種情況下，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%;
}