htmledit_views">

1、小程序view-image居中

html"><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"

html"><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>

小程序另一个自适应显示图片

html"> <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居中

html"><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="https://b2c.jihainet.com/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" src="https://b2c.jihainet.com/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" lazy="loaded">
</div>