渐变国旗头像怎么设置

品牌型号：vivoY73s

系统：Funtouch OS_10.5

软件版本:微信8.0.11 以微信8.0.11为例，渐变国旗头像可以进入小程序在线生成获取头像保存。分为5步，具体步骤如下： 1 进入微信小程序<!-- 1第1步 进入微信小程序 -->

打开手机微信，点击发现，选择小程序选项。

2 搜索国旗头像进入<!-- 2第2步 搜索碰此国旗头像进入 -->

点击搜索图标，在框内输入国旗头像，选择国旗头像在线生成。

3 选择国旗头像<!-- 3第3步 选笑此迅择国旗头像 -->

进入页面后，点击国旗头像。

4 选择领取专属头像<!-- 4第4步 选择领取专属头像 -->

进入页面后，点击领取你扒梁的国庆专属头像。

5 选获取头像并保存头像<!-- 5第5步 选获取头像并保存头像 -->

点击获取头像，点击允许，选择保存头像即可。

因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="者慎widthFix"

<image class="img" src="../images/1.png" mode="widthFix">

设置宽首耐敬度100%，

.img{width: 100%}

这样就可以实亩悉现图片宽度100%高度自适应，图片不会拉伸

有些从接口传递过来的图片，本身图樱缺歼片大小不是固定一个比例，全部渲染显示在页脊冲面上，会有唰得扮链拉伸从大到小快速闪下变形的bug，很影响用户体验。

image的mode图片剪裁缩放模式用 mode='widthFix' (宽度不变，高度自动变化，保持原图宽高比不变)，记得要在css里也加上height:auto，可以消除渲染拉伸变形一闪而过的bug。

image 的mode有13种模式，4种是缩放模式，9种是剪裁模式。

---