Vue uniapp实现图片宽度100%、高度自适应的效果

默认给height:auto;就看不到图片了，要想实现自适应高度效果，首先给图片设置 mode="widthFix"样式中设置高度自适应 height:auto;以上是一行两列的图片布局效果，宽度固定，高度自适应。

weixin_43337481

2102人浏览 · 2023-07-12 17:21:38

weixin_43337481 · 2023-07-12 17:21:38 发布

默认给height:auto;就看不到图片了，要想实现自适应高度效果，首先给图片设置 mode="widthFix"

<view class="img-info">
				<image mode="widthFix" src="../../static/img/p10.jpg" />
				<image mode="widthFix" src="../../static/img/p10.jpg" />
				<image mode="widthFix" src="../../static/img/p10.jpg" />
				<image mode="widthFix" src="../../static/img/p10.jpg" />
			</view>

样式中设置高度自适应 height:auto; 就可以了

.img-info {
	margin-top:20rpx;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	image {
		width:320rpx;
		height:auto;
		margin-bottom: 20rpx;
	}
}

以上是一行两列的图片布局效果，宽度固定，高度自适应