微信小程序微信小程序开发大前端-爬坑路

小程序之关于image的骚操作

2018-12-19  本文已影响20人  齐梓曦

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

上一篇 下一篇

猜你喜欢

热点阅读