微信小程序 image标签中的图片宽高固定并且保证图片不变形的做法(不变形、裁剪)

我的简历这个模块，涉及到了生活照的图片的展示，图片的宽高是固定死的:宽度是父控件的33%，高度是105px,在这种情况下，要保证图片不变形，就要借助image标签中的mode属性了，其中有个属性值是aspectFill,意思就是说，在保证原图的不变形(缩放比例不变)的情况下，图片的哪个短边先缩放到白色的宽或高，就停止缩放， 开始截取多余部分

image.png

---

微信的aspectFill属性裁剪且不变形的原理(想理解这个属性的同学请往下看)

• 用AE做了一个动画效果，你应该会更好的理解

  
  
  101.1755230.gif

白色为固定的宽高，图片要显示到白色区域中

image.png

使用aspectFill属性值，图片的哪个边先缩放到白色的宽或高，就停止缩放。(其实就是图片的哪个边距离白色近，等比例缩放的时候就会 被先缩放到。这里红色的高距离白色近，所以当缩放到白色的高高的时候，图片就会停止缩放)

image.png

停止缩放之后，就会开始截取，将图片和白色重合的区域显示到界面上

image.png