方法一

使用视图容器的背景图

1、一般我们给view，或者div，加背景结果都会如下吧，上截图…

2、然后我们在添加些样式

background-repeat:no-repeat;/*图像的平铺模式*/
background-size: cover;/*背景图像扩展至足够大（center、cover、100%等）*/
background-position: 50% 50%;/*背景图像的起始位置（center、100%）*/

就成了这样

缺点：

1、在小程序中，设置view的背景图，需要使用网络地址的，不能使用本地地址，否者加载不了（还可以把图转什么64来着，但是冗余太多，果断放弃）。

2、在HTML中，需要设置兼容性（关于兼容性，可以看看这个https://blog.csdn.net/hangge0111/article/details/81736479）

-moz-background-size: 100% 100%;/*Firefox浏览器兼容*/
-webkit-background-size:100% 100%;/*Safari 和 Chrome*/    
-o-background-size:100% 100%;
background-size:100% 100%;

方法二

使用image

（PS:我自己的话，一般只有在需要大幅度展示图案的地方，才会使用image，以下部分来源于网络）

小程序图片高度自适应

这里踩了很多遍的坑，花了时间，以为像以前以前给他上级的盒子不给高度就行了，oh,no，这是一个坑，关键在于image标签的一个属性：mode="widthFix"，简单搞定

<image src="{{item.cover}}" class='wedding_img' mode="widthFix" />

知识点：mode="widthFix"

　　Widthfix : 宽度固定，高度随着图片的高度自动变化，（根据宽度，按比例缩放高度）

　　Widthfix属性的最大特点是，图片高度将不会按照设定的尺寸呈现，比如设置image宽度为700px，高度为340px，如果设置mode=widthfix，则图片最终不会按照750px和340px呈现，而是将图的宽设置为700px，高度自动，此时的宽高依旧和原图等比，如图。

除了mode="widthFix"，还有"aspectFill"、”scaleToFill“

微信开放文档中有提到

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

mode 的合法值

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变（根据宽度，按比例缩放高度）
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

关于图片 的设置

方法一

使用视图容器的背景图

方法二

使用image

小程序图片高度自适应

关于图片的设置