小程序之关于image的骚操作

小程序之关于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组件之宽高骚操作至此结束。