微信小程序图片引入后尺寸不对？

Question

这是ui上的图片

这是代码上的图

怎么让代码上回显出来跟ui图一致

Answer 1

小程序的 image 标签可以设置 mode 属性来渲染图片展示的方式。

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" src="{{src}}" />

传统 html 中比较常见的图片自适应方案是设置指定宽度，同时高度 auto 为自适应。但小程序中必须设置宽高和指定 mode

Answer 2

设置image组件mode属性为aspectFit
若下面多出间距，设置一下display:inherit 或者vertical-align:middle