小程序的image圖片顯示

最近接觸到了一點小程序的東西，跟我們平常的HTML還真不太一樣，這里我先大概講一下圖片的顯示問題，

小程序的圖片用的是<image><image/>標簽，他默認的大小是寬300px，高225px。那我們如果用圖片的話，肯定不能用默認的大小，那image常用的除了src屬性之外，還有一個mode屬性，他有4中縮放模式，9種剪裁模式，如果我們想把圖片完全顯示出來的話，就用 widthFix，寬度不變，高度自動變化，保持原圖寬高比不變，下面我有兩種方法可以顯示完整不被拉伸的圖片，

第一種，圖片被父元素包裹，父元素設置寬度(小程序的單位是rpx，會自適應不同屏幕的大小)，圖片的寬度為100%，加上屬性mode='widthFix'，

  <view class='btn'>
    <image src='../image/share.png' mode='widthFix'></image>
  </view>

.btn{
  width: 60%;
  background: none;
}
.btn image{
  width: 100%;
}

　　

第二種，圖片加上屬性mode='widthFix'，然后給圖片自己設置寬度

<image src='../image/bg.jpg' class='bg' mode='widthFix'></image>

.bg{
  display: block;
  width: 100%;
}

　　

這兩種方法都可以實現，自己選用哪一個嘍