微信小程序固定显示图片大小，且不变形？

Question

微信小程序如何实现，

1.固定显示图片大小，且不变形？如果图片尺寸大，可以“截取”显示中间部分。
2.如果实现真正图片裁剪，一般是在前端还是后端实现？

经测试如果设置了mode="widthFix"，自定义的图片宽度就失效了。

.img {
    width: 100px;
    height: 70px;
    border-radius: 3px;
}​

<image wx:else class="img" mode="widthFix" src="default.png"></image>

Answer 1

Answer 2

1：我记得是aspectFill吧
2：不绝对，看情况，都可以，都不难

Answer 3

1.补充一个css的方法。
利用 css 的background 属性将图片当做背景图展示，这样 的image 位置只需要留够宽高，然后利用background-position: center;属性将图片展示中间部分就可以了。

2.对于实现图片裁剪，前后端都可以，如果你们图片是CDN的资源，一般情况下各家厂商都有处理图片的后缀参数，值需要加参数就能实现裁剪。前端的话可以考虑image 的mode,或者使用canvas 实现裁剪。