小程序 image组件的4种缩放模式和9种裁剪模式

本文详细介绍了4种图片缩放模式:scaleToFill、aspectFit、aspectFill、widthFix,以及9种裁剪模式:top、bottom、center、left、right、topleft、topright、bottomleft、bottomright,帮助读者理解不同模式下图片的显示效果。

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

  1. 4种缩放模式
    1. scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
    2. aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来
    3. aspectFill 保持纵横比缩放图片,只保证图片的的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
    4. widthFix 宽度不变,高度自动变化,保持原图宽高比不变
  2. 9种裁剪模式
    1. top 不缩放图片,只显示图片的顶部区域
    2. bottom 不缩放图片,只显示图片的底部区域
    3. center 不缩放图片,只显示图片的中间区域
    4. left 不缩放图片,只显示图片的左边区域
    5. right 不缩放图片,只显示图片的右边区域
    6. top left 不缩放图片,只显示图片的左上边区域
    7. top right 不缩放图片,只显示图片的右上边区域
    8. bottom left 不缩放图片,只显示图片的左下边区域
    9. bottom right 不缩放图片,只显示图片的右下边区域
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值