小程序之关于image的骚操作

比眉伴天荒 2022-04-10 06:47 155阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

### 小程序之关于image的骚操作 ###

小程序项目中不免会使用到图片的操作。然鹅小程序中的image与html中的img存在区别。

先来看看官方给的两点提示：

> 注一，image组件默认宽度300px、高度225px

> 注二，image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

此处单讲下有关第一条的提示。

官方给出image的modal模式共有13中，其中 4 种是缩放模式，9 种是裁剪模式。

其中我们经常使用的莫过于其中的缩放模式，而非裁剪模式。而在缩放模式中**widthFix（宽度不变，高度自动变化，保持原图宽高比不变）**更是应用最高的模式。

如图所示：

![Image 1][]

示例图片

不难发现，最初我的目的是想要一个80\*80的圆形img然而由于图片本身的宽高比并非1:1最终导致展现出来的是一个椭圆形咯

对比官网对于**widthFix**的介绍以及查看到的样式可知，image组件在应用了该modal后会自行调整图片高度。

那么应该怎么做呢？

其实找到原因，解决就简单了。那就是给其加上最大最小高度进行限制。

.test_image{
          width: 80px;
          min-height: 80px;
          border-radius: 50%;
          background: red;
        }

效果如下：

![Image 1][]

示例图片02

当当当。ok了达到最终想要的效果了。

--------------------

**end**

关于小程序中的image组件之宽高骚操作至此结束。

作者：齐梓曦  
链接：https://www.jianshu.com/p/e2815a3d373d

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[2018121912254161]: /images/20220402/5b8529e1f5b54a548237a79bc00bebcd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 python骚操作之——判断整数

> [Alex ☆ 想要改变世界的007程序员][Alex _ _007] 在很多场景下都需要用到判断一个数是否为整数的需求，正好今天遇到了，在这里总结一下，以后可以继续补充

迈不过友情╰/ 2023年01月17日 08:28/ 0 赞/ 109 阅读

相关 uniapp之小程序分包操作

> 小程序上传的时候，主包不能超过2M，如果超出，则会上传失败，这时候就需要把界面进行分包，还有static下面的图片，尽量使用服务器的。 > > 附上微信小程序分包文档连

忘是亡心i/ 2022年12月30日 10:52/ 0 赞/ 173 阅读

相关 GIT 操作之冷门骚操作

GIT 操作之冷门骚操作 git log（windows下）显示乱码处理 git 合并远程多次分支提交查看选中

女爷i/ 2022年12月24日 00:53/ 0 赞/ 119 阅读

相关 Java实现关于数组的一些骚操作

如何找出数组中唯一的重复元素？ > 问题描述：数组a\[N\]，1-N-1这N-1个数存放在a\[N\]中，其中某个数字重复1次。写一个函数，找出重复的数字。要求每个数组

矫情吗；*/ 2022年05月17日 22:35/ 0 赞/ 194 阅读

相关关于微信小程序background-images

微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片本地图片转化base64网址：[http://imgbase6

偏执的太偏执、/ 2022年04月25日 10:28/ 0 赞/ 467 阅读

相关 Docker之批量处理骚操作！

> 杀死所有正在运行的容器 > docker kill $(docker ps -a -q) > 删除所有已经停止的容器 > docker rm $(docker

刺骨的言语ヽ痛彻心扉/ 2022年04月23日 02:54/ 0 赞/ 182 阅读

相关小程序之关于image的骚操作

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

比眉伴天荒/ 2022年04月10日 06:47/ 0 赞/ 156 阅读

相关 Git-骚操作之批量删除分支

前言一个业务一个业务开发过去，少的是头发，留下的还有超多的本地分支。某一天，我的强迫症突然发作了，我就只想保留当前开发的本地分支，该怎么办呢？当然也可以逐条人肉删除

Love The Way You Lie/ 2022年03月27日 03:16/ 0 赞/ 521 阅读

相关 Pytorch的骚操作

1. Pytorch的detach()、detach\_() detach(): 返回一个新的从当前图中分离的 Variable。返回的 Variable 永

Myth丶恋晨/ 2022年03月12日 14:17/ 0 赞/ 237 阅读

相关 java byte[] 的骚操作

类似于C数组的操作 byte[] bytetest = {0x01,0x03}; 实现C语言的常量结构体数组 class AnsData {

灰太狼/ 2021年09月21日 12:56/ 0 赞/ 301 阅读