微信小程序image组件图片宽度高度自适应

责编:menVScode 2018-10-19 11:03 阅读(95)

由于微信小程序image组件图片有默认固定的宽度和高度,这样我们在做项目的时候,图片不会自适应,出现变形的现象。



image组件官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/image.htmlimage组件默认宽度300px、高度225px;image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。其中 widthFix 是宽度不变,高度自动变化,保持原图宽高比不变。 

例子

wxml

<view class="detail">
    <text>图片</text>
    <view class='content'>
        <image wx:for="{{detailImg}}" src="{{item}}" mode="widthFix"></image>
    </view>
</view>

wxss

.detail .content image{
  display: block;
  width: 95%;
  margin: auto;
} 

效果


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码