HTML 小程序图片百分百显示以及居中对齐上下左右对齐等比缩放

最新推荐文章于 2024-08-11 22:23:08 发布

全栈小5

最新推荐文章于 2024-08-11 22:23:08 发布

阅读量2.7k

点赞数

分类专栏：小程序前端文章标签： html css 小程序布局

本文链接：https://blog.csdn.net/lmy_520/article/details/94405861

版权

前端同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

小程序

15 篇文章 1 订阅

订阅专栏

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