小程序 、h5图片铺满div，自适应容器大小

图片铺满div，自适应容器大小，不会拉伸变形

小程序

mode属性

scaleToFill：缩放模式，不保持纵横比，图片拉伸至填满 image 元素
aspectFit： 缩放模式，保持纵横比，保证图片的长边能完全显示出来。
aspectFill： 缩放模式，保持纵横比，保证图片的短边能完全显示出来，长边截取。
widthFix： 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
其他的不实用，不做讲解

例子：只有这样写才能保证图片宽高小于大于box展示大小的图片都能不变形的铺满显示

<view class="comm__box">
	<image class="comm__img" mode="widthFix" src=""></image>
</view>

.comm__box{
	width: 100%;
  height: calc((100vw - 40px) * 250 / 690);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.comm__mg {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform:translate(-50%,-25%);
  display: block;
}

2. 使用bindload绑定函数动态自适应
思路：获取到原图的宽度和高度。

然后计算他们的宽高比率。。然后设置一个宽度大小（rpx），最后通过style动态设置image的宽高。

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

var app = getApp()
Page({
	data: {
		imgwidth:0,
		imgheight:0,
	},
	onLoad: function() {
	},
  	imageLoad: function(e) {
  		var _this=this;
		var $width=e.detail.width,    //获取图片真实宽度
		    $height=e.detail.height,
		    ratio=$width/$height;   //图片的真实宽高比例
		var viewWidth=500,           //设置图片显示宽度，
            viewHeight=500/ratio;    //计算的高度值
		this.setData({
			imgwidth:viewWidth,
		    imgheight:viewHeight
		})
  	}
})

h5

1. object-fit属性，对应小程序的mode
思路：直接给img套用一个object-fit:cover;让img填满盒模型。
代码：

img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

缺点：由于是新代码，在一些浏览器上还不兼容。回退机制上，如果浏览器不认识object-fit，那整个图片就会被强制拉伸成容器的尺寸。

2. min
思路：通过对img元素定位，并将它的高度和宽度设置一个最小满屏值。可以根据不同定位来显示大图的展示区域
代码例子：

div{
    position:relative;
    overflow:hidden;
    width: 100%; 
    height: calc((100vw - 40px) * 250 / 690);
}
div img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    display: block;
    min-width: 100%;
    min-height: 100%;
}

缺点：父容器显示区域宽高固定。图片宽高任意一尺寸小于容器时，这个情况是正常的，但如果图片的宽高都大于容器，图片也能铺满，但容器就只显示大图的其中部分。