收藏
回答

image组件如何使图片在容器中居左显示


wxml:

<view class='container'>

 <text>text</text>

 <image mode='aspectFit' src='https://www.baidu.com/img/bd_logo1.png' />

</view>


wxss:

.container {

display: flex;

flex-direction: row;

align-items: center;

border: 1rpx solid green;

}

image {

height: 60px;

max-width: 85%;

border: 1rpx solid red;

}


显示结果如图:



图片其实并没这么宽,可见图片在image组件中是居中显示的。

请问有没有办法让图片在此行居左显示,其他样式不变,如下图效果(即显示在黄框区域):


回答关注问题邀请回答
收藏

3 个回答

  • 连胜
    连胜
    2018-01-16

    你可以动态设置image的width

    有问题,可威信  mianhuabingbei

    2018-01-16
    有用
    回复
  • W.L.
    W.L.
    2018-01-16

    max-width设置小了,那较长的图片的高度就会出问题啊,图片模式是aspectFit的

    2018-01-16
    有用
    回复
  • 连胜
    连胜
    2018-01-16

    max-width设置太大了,设置小一点儿~

    2018-01-16
    有用
    回复
登录 后发表内容