小程序之关于image的骚操作

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

小程序之关于image的骚操作

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

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

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

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

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

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

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

如图所示：

示例图片

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

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

那么应该怎么做呢？

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

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

效果如下：

示例图片02

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

---

end

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

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

关于Fundebug

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