小程序设置图片height:auto,但是图片不显示,实际是高度为0

最新推荐文章于 2024-03-04 14:55:46 发布
最新推荐文章于 2024-03-04 14:55:46 发布
阅读量3.6k 收藏 4
点赞数 7
分类专栏： 小程序 文章标签： 小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35510729/article/details/108075098
版权

刚才在调的时候发现一个图片怎么都出不来,路径是对的
但是就好像消失了,看了下调试器里面的
在这里插入图片描述

在这里插入图片描述
显示图片高度为0
看了下wxss里的width: 50px;height: auto;
height:auto;去掉 在<image>标签里加一个mode="widthFix"属性就行了在这里插入图片描述

我叫你把音乐关掉
关注
专栏目录
微信小程序图片高度按照图片真实宽高比自适应
qq_31888873的博客
03-23 1593
原理：image组件bindload属性 前端在按照设计图定的宽度做好图片的宽高之后，如果图片的原始宽高比对应不上，那么图片就会出现拉伸变形的情况，虽然微信小程序有mode属性可以对图片进行适应，但是会有部分显示不完全或者会有留白，而且如果不给image组件设置高度或者设置为auto时，图片的宽度为0。 后来我发现了image组件的bindload属性 我发现event.detail 里给出的宽和高是图片的原始宽高，那么我们就可以根据这个宽高得出图片的宽高比，在宽度一定时就可以做到高度自适应而不会拉伸变形或
微信小程序获取滚动条高度_微信小程序完美解决scroll-view高度自适应问题的方法...
weixin_39619481的博客
01-17 1488
第一种情况，scroll-view占据整屏scroll-view {height: 100vh;}第二种情况，scroll-view自适应页面剩余高度xml文件wxss文件.box {display: flex;flex-direction:column;height:100vh;overflow:hidden;}.box-head {flex-shrink: 0;height: 50px;}.b...
微信小程序中图片高度为0的问题
xiaosheng
09-05 2964
话说多说，直接上问题。 在微信小程序中，有时候图片加载出来高度是0，但是也有宽度，控制台的wxml中图片也有，最后才知道要给page加个高度，可是当page高度添加上去之后，无论page的值写多少图片大小都不变，找了半天才发现是在app.wxss中已经给全局定义了image的高度，把app.wxss中关于image的给删掉之后，图片就可以正常显示，此时不用加page也可以显示...
图片height: auto;，图片不显示
weixin_35755188的博客
01-15 406
当图片的高度设置为"auto"时，它的高度将根据图片的实际大小来自动调整。如果图片不显示，可能是因为图片的路径设置错误或者图片文件已经损坏。建议检查图片文件是否存在，并检查图片路径是否正确。 ...
uniapp css 设置图像image height：auto失效问题
weixin_43907110的博客
08-17 877
或display 不是行内值时 height：auto失效,导致图片height直接为0,图片显示不出来。
图片设置加上height: auto;图片不显示，不加，则显示
weixin_42604188的博客
01-15 508
如果将图片的 CSS 设置中的 height 设置为 auto，则图片将不会显示。这是因为当 height 设置为 auto 时，浏览器将不会明确指定图片的高度，因此图片将不会显示。如果不设置 height，则图片将显示。 ...
微信小程序图片右边加两行文字的代码
10-15
在微信小程序开发中，有时我们需要将图片与文字结合展示，例如让图片位于右侧，而文字则在图片旁边。本篇文章将详细讲解如何实现这一功能，通过具体的WXML和WXSS代码示例，帮助开发者更好地理解和应用。 首先，我们...
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
01-20
本实例主要讲解如何在微信小程序中实现Swiper切换卡时，内嵌的Scroll-View不显示滚动条。 首先，我们需要了解涉及的关键组件和属性： 1. **Swiper组件**：这是一个用于展示多个卡片轮播的组件，通过`current`属性...
微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板
D_evin_的博客
08-21 2088
做个简单的生成二维码海报分享，我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片，原生小程序不支持，不多介绍下面有全部代码有注释、参数自行替换运行看看，还有需要优化的地方，有问题可以咨询我，我写的已经上线
uniapp运行微信小程序--本地图片无法显示
a0987s的博客
04-07 6585
通过hbulder允许微信小程序，在小程序开发工具中无法显示图片 有两个原因： 1、图片高度不可以用“ % ”赋值； 2、src路径出错
微信小程序图片高度固定,width:auto,图片不展示
z9874123的博客
02-24 883
微信小程序图片高度固定,width:auto,图片不展示 解决办法 image标签设置width:auto 设置mode属性mode=heightFix 高度固定,宽度不固定 小程序版本 2.10.3 mode的合法值
[原创] ie中img被拉伸，自动为width，height赋值
大象的博客
07-06 4032
需求：人脸照片展示 说明：cs端上传图片，在web上展示。由于只对图片大小，格式进行判断，而无法控制图片形状。效果如下 如果没有图片，即展示默认图片。默认图片是350px*250px大小，和外面的div是保持一致大小. &lt;div class="boxImg"&gt; &lt;img class="imgContent userMgrImg" :src="facePicPa...
图片如何进行height：auto
weixin_42262436的博客
02-25 1561
    页面渲染，是先css文件，然后再加载图片，工程中经常会使用到大的图片，如果不进行图片的高度设定，会出现页面跳动，如下图所示，对于用户体验十分不友好，同时，不同尺寸的手机，进行展示图片，图片的高度也不一样，如何进行将图片的高度进行预设置，是目前的问题。              对于这个问题，解决的方案如下，图片外部一定记得要包一层div哦 html部分 &lt;div class...
Uniapp中的image设置height: auto不显示问题及如何解决
最新发布
m0_63553261的博客
03-04 857
Uniapp中的image设置height: auto不显示问题及如何解决
css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？
xiaozhen0610的博客
07-27 2682
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。960px的定位宽度永远居中。css中的auto是自动适应的意思，而在css中auto往往都是默认值。正如margin:0 auto，意思就是上下边距为0，左右边距为auto，就是自动适应。但是，如果要使用他的话，就必须给标签配上指定的宽度，如下：<div class="center">居中&l
css 取消height属性
热门推荐
chen1042246612的博客
04-17 1万+
div { height：20px； } div { height：auto；//取消height }
html设置图片高度宽度自适应屏幕,css让图片自适应屏幕大小的方法
weixin_35980523的博客
06-04 6399
css让图片自适应屏幕大小的方法发布时间：2020-11-12 09:52:18来源：亿速云阅读：162作者：小新这篇文章主要介绍了css让图片自适应屏幕大小的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。css让图片自适应屏幕大小的方法：在css文件中加入代码【img {height: auto; width: auto\9; w...
CSS中height：auto 属性无效
vuvivian的博客
06-29 8399
height:auto 属性无效的处理方法
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值