前言在微信小程序开发中image组件是最常用的基础组件之一。它负责图片的展示并通过mode属性提供了多种缩放和裁剪模式以适应不同的布局需求。本文将带你从零开始通过一个完整的小程序 Demo演示image组件各种显示模式的效果并附上可直接运行的源码。一、项目准备1.1 新建小程序项目打开微信开发者工具新建一个不使用云服务、不使用模板的小程序项目项目名称image组件后端服务不使用云服务开发模式小程序模板选择不使用模板1.2 修改渲染引擎为了让image组件的所有mode模式都能生效尤其是裁剪模式需要将app.json中的渲染引擎修改为webviewjson复制下载{ renderer: webview }注意如果app.json中没有renderer字段可以手动添加如果原本是skyline请改为webview。因为部分裁剪模式如top、bottom、center等仅 Webview 支持。1.3 准备图片素材在小程序根目录下新建images文件夹将一张测试图片放入其中例如daxinganling.jpg。后续所有模式都将使用同一张图片进行对比。二、编写代码2.1 页面结构 index.wxml使用wx:for列表渲染循环展示每种模式的说明文字和图片html复制下载运行!--index.wxml-- navigation-bar titleimage组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle图片的不同显示模式/view block wx:for{{imgArray}} wx:keyindex view显示模式编号{{index 1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}}/image /view /block /view /scroll-view要点说明{{index 1}}显示当前模式的编号从 1 开始。{{item.text}}绑定每种模式的文字说明。{{src}}绑定图片路径。{{item.mode}}绑定image组件的显示模式。2.2 样式 index.wxsscss复制下载/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .img-layout { text-align: center; margin-top: 20px; margin-bottom: 40px; } image { width: 100%; height: 480px; background-color: #eee; }要点说明page使用flex布局让scroll-view占满剩余高度。image宽度设为100%自适应屏幕宽度避免图片溢出。高度固定为480px方便对比不同模式下的显示差异。2.3 全局样式 app.wxsscss复制下载/*app.wxss*/ .box { margin: 20px; padding: 20px; border: 2px solid silver; } .title { font-size: 40px; font-weight: bolder; text-align: center; margin-bottom: 30px; color: red; }2.4 数据逻辑 index.jsjavascript复制下载// index.js Page({ data: { // 图片路径 src: /images/daxinganling.jpg, // 显示图片模式及文字说明数组 imgArray: [{ mode: scaleToFill, text: scaleToFill: 缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 }, { mode: aspectFit, text: aspectFit: 缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来 }, { mode: aspectFill, text: aspectFill: 缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取 }, { mode: widthFix, text: widthFix: 缩放模式, 宽度不变, 高度自动变化, 保持原图宽高比不变 }, { mode: heightFix, text: heightFix: 缩放模式, 高度不变, 宽度自动变化, 保持原图宽高比不变 }, { mode: top, text: top: 裁剪模式, 不缩放图片, 只显示图片的顶部区域。仅 Webview 支持 }, { mode: bottom, text: bottom: 裁剪模式, 不缩放图片, 只显示图片的底部区域。仅 Webview 支持 }, { mode: center, text: center: 裁剪模式, 不缩放图片, 只显示图片的中间区域。仅 Webview 支持 }, { mode: left, text: left: 裁剪模式, 不缩放图片, 只显示图片的左边区域。仅 Webview 支持 }, { mode: right, text: right: 裁剪模式, 不缩放图片, 只显示图片的右边区域。仅 Webview 支持 }, { mode: top left, text: top left: 裁剪模式, 不缩放图片, 只显示图片的左上边区域。仅 Webview 支持 }, { mode: top right, text: top right: 裁剪模式, 不缩放图片, 只显示图片的右上边区域。仅 Webview 支持 }, { mode: bottom left, text: bottom left: 裁剪模式, 不缩放图片, 只显示图片的左下边区域。仅 Webview 支持 }] } })三、模式效果解析3.1 缩放模式4 种模式说明是否保持比例scaleToFill不保持纵横比拉伸填满整个 image否aspectFit保持纵横比长边完整显示短边留白是aspectFill保持纵横比短边完整显示长边截取是widthFix宽度固定高度按原比例自动变化是heightFix高度固定宽度按原比例自动变化是注widthFix和heightFix在部分文档中被归类为缩放模式实际使用时根据需求选择即可。3.2 裁剪模式8 种仅 Webview 支持模式说明top只显示图片顶部区域bottom只显示图片底部区域center只显示图片中间区域left只显示图片左边区域right只显示图片右边区域top left只显示图片左上区域top right只显示图片右上区域bottom left只显示图片左下区域四、运行效果编译运行后页面会依次展示 13 种不同的显示模式微信官方标准共 13 种。通过滚动条可以逐项对比每种模式的效果差异直观理解image组件的mode属性。五、总结image组件的mode属性决定了图片如何适应容器。缩放模式会改变图片尺寸裁剪模式则保持原图尺寸并截取部分区域。裁剪模式需要webview渲染引擎支持使用前需确认app.json配置。通过wx:for列表渲染可以快速生成多种模式的对比展示页面。掌握这些模式后你可以根据实际 UI 需求灵活选择合适的图片展示方式提升小程序的视觉体验。
