小程序image图片缩小不变形


使用mode =aspectFill

值	        说明	
scaleToFill	缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素	  图片会变形
aspectFit	缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。	图片会变形
aspectFill	缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。  图片裁剪,不会变形
也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
<view>
    <text>图片aspectFill</text>
    <image class="img-limt" mode='aspectFill' src="../../img/bg.jpg"></image>
</view>

.img-limt{
    width: 400rpx;
    height: 400rpx;
}

使用mode =aspectFill

<view>
    <text>aspectFit</text>
    <image class="img-limt" mode='aspectFit' src="../../img/bg.jpg"></image>
</view>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM