1、小程序view-image居中
<view style="height:200rpx;overflow:hidden;border:1rpx solid #ccc;position:relative;"><image class="images" mode="widthFix" src="{{item.imagessrc}}" style="width:100%;height:100%;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%;" role="img"></image></view>
小程序还有一个本身更加方法的属性和样式设置，如下
style="width:100%;height:100%;"
mode="aspectFit"
<view style="width:100%;height:100%;color:#888;border:2px dashed pink;position:relative;" ><text style="position:absolute;top:50%;left:50%;width:100rpx;height:100rpx;line-heigth:100rpx;margin-left:-50rpx;margin-top:-50rpx;text-align:center;">+</text><image src="{{imageList[0].path}}" style="width:100%;height:100%;" mode="aspectFit"></image></view>
小程序另一个自适应显示图片
<image bindtap="" bindload="imageLoad" src="{{path}}" data-src="{{path}}" style="width:100% !important;height:100% !important;opacity:{{opacity}};" model="aspectFit"></image>
2、HTML div-image居中
<div style="height:0;width:100%;padding:50% 0;background:#fff;position:relative;"><img style="transform: translate(-50%, -50%);position:absolute;top:50%;left:50%;width: auto !important;height: auto !important;max-height: 100%;max-width: 100%;" data-src="/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" src="/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" lazy="loaded"></div>
