小編推薦：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、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！