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

最新推荐文章于 2024-08-19 11:19:04 发布

lemontree-xy

最新推荐文章于 2024-08-19 11:19:04 发布

阅读量2.1k

点赞数 2

分类专栏： css3 uniapp 文章标签： vue.js uni-app 前端

本文链接：https://blog.csdn.net/weixin_43337481/article/details/131686472

版权

uniapp 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

当设置图片height:auto时可能无法显示，通过设置mode=widthFix可以实现宽度固定，高度自适应的效果。在样式中使用flex布局，配合width:320rpx和height:auto，可以创建一行两列的图片展示，保持宽度一致，高度按比例自适应。

摘要由CSDN通过智能技术生成

默认给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;
	}
}

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