微信小程序图片实现宽度100%，高度自适应

系统管理员 2022-03-11 10:24 428阅读 0赞

图片设置宽度

.img\{

width:100%;

给image增加属性 mode="widthFix"

mode详解：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>缩放</td> 
   <td>scaleToFill</td> 
   <td>不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>aspectFit</td> 
   <td>保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>aspectFill</td> 
   <td>保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>widthFix</td> 
   <td>宽度不变，高度自动变化，保持原图宽高比不变</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top</td> 
   <td>不缩放图片，只显示图片的顶部区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom</td> 
   <td>不缩放图片，只显示图片的底部区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>center</td> 
   <td>不缩放图片，只显示图片的中间区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>left</td> 
   <td>不缩放图片，只显示图片的左边区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>right</td> 
   <td>不缩放图片，只显示图片的右边区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top left</td> 
   <td>不缩放图片，只显示图片的左上边区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top right</td> 
   <td>不缩放图片，只显示图片的右上边区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom left</td> 
   <td>不缩放图片，只显示图片的左下边区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom right</td> 
   <td>不缩放图片，只显示图片的右下边区域</td> 
  </tr> 
 </tbody> 
</table>