ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示

2021-11-28 09:02:32  阅读:104  来源: 互联网

标签:显示 裁切 缩放 微信 image 裁剪 模式 图片


 

微信小程序的组件和普通的 HTML 有所不同,比如 HTML 的 div 在小程序里面是 view ,HTML 的 span 在小程序里是 text

因为 uni-app 要兼容多终端和各种小程序,所以它的语法和微信小程序是基本一致的。

今天就整理一下小程序的图片组件(image)的缩放和裁切显示实现,下面以 uni-app 为例。

如果在页面中增加一个 <image /> 标签,不设置任何样式的话,它会占据很大一块空间。查看 uni-app 源码可以发现,图片组件有一个 320px 的宽度和 240px 的高度。

/* CSS */
uni-image {
    width: 320px;
    height: 240px;
    display: inline-block;
    overflow: hidden;
    position: relative
}

这样,如果只给图片设置宽度或者高度的话,会导致图片被拉伸。

一般给 image 设置大小的时候要同时指定宽度和高度:

/* CSS */
.image {
    width: 150px;
    height: 150px;
}

如果图片的长度和宽度不固定,可以设定宽度(或高度),然后高度(或宽度)自适应:

/* CSS */
.image {
    width: 150px;
    height: auto;
}

但如果一个列表中的图片大小不一,就比较麻烦。不过不用担心,微信小程序为 image 组件提供了一个 mode 属性。

mode 属性不仅可以让图片等比例缩放,还可以自动裁切,按照意愿进行显示。

比如等比例显示,我们可以给图片设置一个宽度,然后设置 mode="widthFix" ,这样图片也不会被拉伸:

<!-- HTML -->
<image class="image" mode="widthFix" />

/* CSS */
.image {
    width: 150px;
}

比如用户头像,图片的宽高是固定的,图片如果比较长,可以使用 mode="aspectFill" 等比例缩放,自动裁剪短边填充:

<!-- HTML -->
<image class="image" mode="aspectFill" />

/* CSS */
.image {
    width: 150px;
    height: 150px;
}

这样即可以按照尺寸显示图片,又不会被拉伸了。

image 组件的 mode 属性还有很多参数,使用起来非常灵活:

scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。

aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。

heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变。

top 裁剪模式,不缩放图片,只显示图片的顶部区域。

bottom 裁剪模式,不缩放图片,只显示图片的底部区域。

center 裁剪模式,不缩放图片,只显示图片的中间区域。

left 裁剪模式,不缩放图片,只显示图片的左边区域。

right 裁剪模式,不缩放图片,只显示图片的右边区域。

top left 裁剪模式,不缩放图片,只显示图片的左上边区域。

top right 裁剪模式,不缩放图片,只显示图片的右上边区域。

bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域。

bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域。

标签:显示,裁切,缩放,微信,image,裁剪,模式,图片
来源: https://www.cnblogs.com/xiadongqing/p/15614266.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有