做小程序开发的朋友，十有八九都被图片显示折磨过。同一张图，在设计稿里好好的，一上真机就变形、裁切、留白，怎么调都不对劲。其实根子往往不在图片本身，而在组件那个不起眼的属性上。今天咱就把这个属性掰开揉碎了聊透，让你以后处理图片适配，心里有杆秤。

先看最常用的和。这俩是双胞胎，但性格截然相反。讲究“全须全尾”，把整张图缩放进容器，长边顶到边界，短边留白，就像相框里放照片，四周可能空出来。适合展示二维码、长截图、商品主图这种必须看全貌的场景。则霸道得多，它把图片等比放大到填满整个容器，超出部分直接裁掉。比如你有个200x200的容器，图片是400x300的，它会放大到400x400，上下各裁掉50像素。这招对头像、封面图、轮播图特别管用，因为容器是方的，图片是长的，不裁就变形，裁了反而干净利落。

很多新手容易栽在上。这个模式默认就是它，但它最坑——不保持比例，直接拉伸图片填满容器。横图变竖图，圆脸变驴脸，全是它的功劳。我见过不少线上事故，就是忘了改这个默认值，导致用户上传的图片被生拉硬拽。那什么时候用呢？说实话，正经场景极少。除非你明确知道图片就是纯色背景或者渐变纹理，拉伸看不出来，否则千万别用。记住一句话：默认值不是为你设计的，是为懒人兜底的。

再往下说，、、、、这一组，看起来简单，实际是“裁切+对齐”的组合拳。比如模式，图片保持原尺寸，只显示容器顶部的部分，超出容器的其他方向全裁掉。这招适合做什么？你有个商品图，重点信息在上面，比如标题、价格标签，下面全是背景空白，用就能精准展示关键区域。同理，适合展示鞋底、包装底部信息，适合展示长条图的起始端，则用于方形容器展示非方形图时，把最核心的中部区域露出来。这组模式不缩放，只裁剪，所以对图片本身的尺寸要求很高，用之前先确认图片分辨率够不够。

还有三个特殊模式，、和这种组合变体，很多人压根没注意过。是神器，它让宽度固定为容器宽度，高度自动按比例计算。比如你写，图片高度会跟着宽度等比变化，根本不用写死高度。做文章详情页、瀑布流列表，这个模式能省一半适配时间。同理，高度固定，宽度自适应，适合横屏长图或者H5头图。至于这种带坐标的，本质上就是和的叠加，对应图片的左上角对齐，用得少，但偶尔处理特殊构图时能救命。

说到实际项目，我建议你按场景建一个“模式速查表”。头像用，因为人脸居中，裁四边不影响；商品详情图用，因为要完整展示，而且宽度固定后高度自适应，排版自然；轮播图用，因为容器比例和图片比例几乎不可能一致，裁掉边缘不影响主视觉；如果图片带文字说明，比如海报、证书，就用，宁可留白也不能裁字。另外有个细节，只影响图片在容器内的呈现方式，不影响容器本身尺寸。所以容器的高宽一定要先定好，再谈模式，顺序反了，模式再对也白搭。

提醒一个容易踩的坑：对GIF动图同样生效，但裁切动图时，性能会明显下降，因为每帧都要做裁剪计算。如果项目里有大面积动图展示，建议改用，牺牲一点视觉效果，换流畅的滚动体验。还有一个隐藏知识点，属性在里不存在，那是CSS的管的，别混为一谈。你要是用了做适配，那就得去研究和，那是另一套逻辑。

话说回来，属性本身不复杂，复杂的是图片和容器之间的千变万化。你只要记住一个核心原则：先问自己“这张图能不能被裁”，能裁就，不能裁就，需要高度自适应就，需要精准定位就或。把这四句话刻在脑子里，再碰到图片适配问题，你就能像老中医开方子一样，望闻问切后直接下药。下次再有人跟你抱怨图片显示不对，你可以先把这篇文章甩给他，然后问一句：“你mode设的啥？”这句话，比一万句“你再调调”都管用。