小程序的image图片显示

Posted 2020-10-26 额爷

最近接触到了一点小程序的东西，跟我们平常的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%;
}

　　

这两种方法都可以实现，自己选用哪一个喽