微信小程序常用组件视频课程-媒体组件-image图片 的使用

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

wxml代码

<!--image组件默认宽度300px、高度225px  500x300 300x180 -->

<view>
  top 不缩放图片，只显示图片的顶部区域</view>
<view>
  <image src="/tupian/fm.png" mode='top' style='width:200px; height:100px;'></image>
</view>

<view  class='myred'>
  widthFix 宽度不变，高度自动变化，保持原图宽高比不变</view>
<view class='myblue  c1'>
  <image src="/tupian/fm.png" mode='widthFix'></image>
</view>

<view>
  aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</view>
<image src="/tupian/fm.png" mode='aspectFill'></image>

<view>
  aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</view>

<view class='myblue'>
  <image src="/tupian/fm.png" mode='aspectFit'></image>
</view>


<view>scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</view>
<view class='myred c1'>
  <image src="/tupian/fm.png" mode='scaleToFill'></image>
  <image src="/tupian/fm2.png"></image>
</view>

欢迎大家收看我的视频教程：微信小程序组件入门到精通