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

摇摆123

3520128

发布于
2022-07-20

fenbox

6.8k237979

更新于
2022-07-20

这是ui上的图片

这是代码上的图

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

微信小程序前端

阅读 2.8k

2 个回答

得票最新

anran758

1.6k1623

发布于
2022-07-20

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

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

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

YoLinDeng

5451318

发布于
2022-07-20

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

查看全部 2 个回答

推荐问题

js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}
13 回答13.1k 阅读
如何防止接口的 key 泄露?
目前有一个小程序,功能上比较简单,但是需要调用其他平台提供的 AI 相关接口。为了节省服务器费用,想直接在前端请求接口,但是这样就会暴露接口的 key。有没有其他办法可以防止 key 泄露? 或者默许 key 可能的泄露,然后实时监控接口的使用量,这种方式是否可行?
8 回答2.9k 阅读
CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
参考使用：antd的Tag我做了2行的Tag： {代码...} 现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
3 回答1.4k 阅读✓ 已解决
字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？
尝试一下字节的 trae AI IDE ([链接])安装后导入 vscode 的配置，好像一起把 vscode 的插件也导入了也能看到 vscode 之前配置的 ssh remote 但是连不上看到「输出」如下⬇️ {代码...}
2 回答5.3k 阅读✓ 已解决
在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？
请问：在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？
5 回答1.5k 阅读
请问开发React Native，一般是推荐哪个主流的UI库呢？
请问开发React Native，一般是推荐哪个主流的UI库呢？我们知道React有antd，但是React Native的话好像React Native Mobile RN不是最主流的。
3 回答2.4k 阅读✓ 已解决
快开发完的Vue3项目要做SEO该如何处理？
快开发完的Vue3项目要做SEO该如何处理？项目已经快开发完了，领导让做SEO，目前的需求是首页做SEO，其他页面不需要优化去论坛上查了一下，发现好多针对Vue的SEO库都过时弃用了，大家有什么好用的库推荐吗？
5 回答1.8k 阅读✓ 已解决

相似问题

微信小程序布局
1 回答1.5k 阅读✓ 已解决
微信小程序的问题
1 回答1.2k 阅读
微信小程序 scroll-view
1.3k 阅读
微信小程序js中如何引用图片？
2 回答4.2k 阅读
微信小程序上传图片问题
1 回答2.7k 阅读

找不到问题？创建新问题

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

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

请问开发React Native，一般是推荐哪个主流的UI库呢？

快开发完的Vue3项目要做SEO该如何处理？