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

微信小程序官方 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>

其他相关文章：https://blog.csdn.net/qq_2842405070/article/details/69382503