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

发布于 8 年前作者 slin5297 次浏览最后编辑 8 年前来自 ask

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 回复
wei80
wei801 楼6 年前

你可以动态设置image的width

有问题,可威信  mianhuabingbei

li83
li832 楼6 年前

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

jfan
jfan3 楼6 年前

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