微信小程序开发之——音乐播放器-音乐推荐

| 缩放模式 | 说明 |

| :-: | :-: |

| scaleToFill | 不保持横纵比缩放图片，使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图片会变形 |

| aspectFit | 保持横纵比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片 |

| aspectFill | 保持横纵比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图 |

| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |

9种裁剪模式

| 裁剪模式 | 说明 |

| :-: | :-: |

| top | 不缩放图片，只显示图片的顶部区域 |

| bottom | 不缩放图片，只显示图片的底部区域 |

| center | 不缩放图片，只显示图片的中间区域 |

| left | 不缩放图片，只显示图片的左边区域 |

| right | 不缩放图片，只显示图片的右边区域 |

| top left | 不缩放图片，只显示图片的左上区域 |

| top right | 不缩放图片，只显示图片的右上区域 |

| bottom left | 不缩放图片，只显示图片的左下区域 |

| bottom right | 不缩放图片，只显示图片的右下区域 |

三 内容区域滚动

---

修改说明

先编写外层的容器，由于这个页面的高度不固定，内容将来可能会增加或减少，因此使用scroll-view组件作为外层容器，当内容高度超过content区域的显示范围后，可以上下滚动

pages/index/info.wxml

已经达到底部