微信小程序开发 踩坑日志之一： image设置宽高无效？

最新推荐文章于 2025-02-21 16:27:04 发布
原创 最新推荐文章于 2025-02-21 16:27:04 发布 · 4.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序 #小程序开发 #踩坑

本文详细解析了一位开发者在设置CSS图片大小时遇到的问题。在尝试多种调整方法无效后，发现图片大小异常的原因在于样式命名冲突，使用了系统默认的icon名称。更改为独特名称后，问题得以解决。 
.icon{
  width: 190rpx;
  height: 190rpx;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}
<image src="/images/icon/big-done.png" class="icon"/>

css样式中我给图片设置了宽高，但无论怎么设置图片都还是一样那么小。在进行各种更改尝试之后。。突然发现是我样式命名不可以用icon，这个应该是官方默认的一个样式，如果用了会自动识别成官方icon之类的。。于是改了个名就成功了。。

其他的同理，尽量给样式起一个独特一点的名字吧

2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 16万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
电脑常报错：C:\Users\MEIJIQ~1\AppData\Local\Temp\A843535B-7763-4C04-B3B5-B4AC7E1F0A09.exe，文件或目录损坏且...如何解决？
最新发布
**My Coding Family**
06-05 1464
🏆 本文收录于《全栈Bug调优(实战版)》专栏，致力于分享我在项目实战过程中遇到的各类Bug及其原因，并提供切实有效的解决方案。无论你是初学者还是经验丰富的开发者，本文将为你指引出一条更高效的Bug修复之路，助你早日登顶，迈向财富自由的梦想🚀！同时，欢迎大家关注、收藏、订阅本专栏，更多精彩内容正在持续更新中。让我们一起进步，Up！Up！Up！    备注： 部分问题/难题源自互联网，经过精心筛选和整理，结合数位十多年大厂实战经验资深大佬经验总结所得，数条可行方案供所需之人参考。
微信小程序：图片高度设置无效问题
qq_43882506的博客
09-14 2907
控制台查看元素，显示其style中多了一个没有设置的高度值 找了很久发现是因为image标签设置了mode=“widthFix”，此时高度会自适应，样式中设置高度无效
微信小程序——image图片组件宽高自适应方法
01-03
前言： 第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻，猜疑是哪给图片默认设置了图片高度，后来使用调试器选中图片元素查看了下原因，果不其然，小程序给image组件默认设置了以下样式： image { width: 320px; height: 240px; display: inline-bloc
uni-app上自定义微信小程序的tabbar
liuye066的专栏
07-26 4139
今天用uni-app开发微信小程序时，修改tabbar的样式无效，如selectedColor, iconWidth等，明明官网上都有这些属性，但在模拟器上就是没有效果。自定义tabbar1、在微信官网，自定义tabbar的页面，下载自定义tabbar示例代码；将其中的custom-tab-bar目录整个拷贝到项目根目录下；2、修改custom-tab-bar/index.js的文件，路径都改为自己uni-app项目下的页面路径和图片路径 3、pages.json文件tabbar配置：设置"custom
小程序image标签的宽高自适应失效
qq_43618136的博客
12-25 1182
小程序image标签并没有像在html一样能在设置宽度后自适应，小程序的image标签需要指定模式mode
记录关于 vant image 组件设置宽高不生效的问题（项目引入了百度地图 sdk 导致不生效）
qq_44851509的博客
02-21 307
起因是项目用了 vant的 image 组件，然后给图片设置宽高不生效，会默认把图片变得很大，后面排查是因为引入了百度地图 sdk，里面的 css 样式把当前 vant 图片的样式污染了。用样式穿透就可以解决。
ESP32串口日志分析技巧：6大实战方法精准定位系统异常，99%工程师都忽略的关键日志模式
ESP32的串口日志系统是嵌入式调试的核心基础设施，其底层依托于UART控制器与FreeRTOS任务调度的紧密协作。日志输出并非简单的`printf`重定向，而是涉及`esp_log`模块、底层驱动与系统事件队列的协同工作。默认情况下...
ESP32 OTA升级通知通过MQTT下发：实现可靠推送的4种设计模式
ESP32凭借其强大的Wi-Fi与蓝牙双模通信能力，广泛应用于智能硬件领域，而结合MQTT协议实现轻量级、高可靠的消息通知机制，为OTA升级提供了理想的通信基础。 MQTT作为一种基于发布/订阅模式的低开销消息协议，特别...
微信小程序图片image比例错误
weixin_30562507的博客
07-09 297
image标签不是块级元素，会被其他元素挤兑，导致实际宽高与所设置的不一致。所以需要在image标签之外包一层view标签！ 转载于:https://www.cnblogs.com/BlueCc/p/11158918.html...
#巨坑，设置image 宽高不生效
LYR 的博客
09-02 3341
原因， style 标签没标注 lang = scss, 导致没法识别
关于微信小程序碰到得小问题 ---- 图片设置固定宽度高度自适应
bacon_2016的博客
03-05 348
对于H5页面，当我们对图片，只设置宽度，高度会根据图片库得图片得宽高比自适应高度，然后小程序里得图片只设置宽度，高度却不能自适应，解决方法： 添加：mode="widthFix" eg：<image class='about-img' src="{{img}}" mode="widthFix"></image> 转载于:https://www.cnblog...
微信小程序 动态设置class无效
A873054267的博客
07-22 4270
可能导致的原因是在 动态改变某些自带标签上的class导致的，在处理这些样式时，最好外包一层view，由于我所用的只是一个颜色的改变，因此，直接讲style写到行内样式去了
微信小程序image组件图片设置最大宽度 宽高自适应
weixin_48495574的博客
11-23 1588
问题描述：在使用微信小程序image组件的时候，在不确定图片宽高情况下 想给一个最大宽度让图片自适应，按比例，image的widthfiex和heightFiex并不能满足（只指定最大宽/高并不会生效）问题解决：使用bindload获取图片信息获取宽高再判断是否超过最大值。
微信小程序 rich-text 富文本图片宽度不受控问题
RealizeInnerSelf丶
02-21 1070
参考文章：微信小程序 - 富文本图片宽度自适应(正则) 问题图 无效代码 /* 下面代码并不能达到预想效果... */ rich-text img { width: 100%; object-fit: contain; } rich-text image { width: 100%; object-fit: contain; } 目标效果图 util.js /**......
解决css设置图片大小不生效的问题
jiaohuizhuang6019的博客
09-09 4691
解决css设置图片大小不生效的问题
uniapp css 设置图像image height：auto失效问题
weixin_43907110的博客
08-17 1243
或display 不是行内值时 height：auto失效,导致图片height直接为0,图片显示不出来。
小程序设置图片height:auto,但是图片不显示,实际是高度为0
qq_37194189的博客
03-10 972
小程序设置图片height:auto,但是图片不显示,实际是高度为0
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值