微信小程序 image 组件小程序图片宽高显示 mode属性设置

最新推荐文章于 2025-02-16 21:51:54 发布

幽幽靖

最新推荐文章于 2025-02-16 21:51:54 发布

阅读量4.2k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/ws19900201/article/details/103418762

版权

微信小程序专栏收录该内容

59 篇文章

订阅专栏

本文介绍了微信小程序中image组件的使用，包括如何设置mode属性以实现不同场景下的图片显示效果。例如，mode='widthFix'使图片宽度100%、高度自适应不变形，mode='aspectFill'则按短边100%填充并裁剪长边。当图片超出容器尺寸出现滚动条时，可通过设置外包元素样式避免。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序官方 image组件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
在这里插入图片描述

1.图片宽100% 高auto，不变形； mode=“widthFix”

<image class="vidimg" mode="widthFix" src="{{item.thumbnail}}" alt="" />

2.图片图片的短边100%，长边裁剪； mode=“aspectFill”

<image class="vidimg" mode="aspectFill" src="{{item.thumbnail}}" alt="" />

3.一般情况图片如果超出设置的尺寸，会出现滚动条，解决办法是图片外包一个元素样式隐藏；

<view class="imgbox">
	<image class="vidimg" mode="aspectFill" src="{{item.thumbnail}}" alt="" />
</view>

<style>
	.imgbox{
		width:500rpx;
		height:800rpx;
		overflow:hidden;
	}
	.imgbox .vidimg{
		width:100%;
	}
</style>