注册登录

1***@qq.com

发布：2019-08-12 10:29
更新：2021-09-18 15:18
阅读：7268

uni-app小程序端富文本图片超出宽度

分类：uni-app

小程序富文本

请问有什么解决办法嘛？网上找的方法不管用，在5+app显示就正常，小程序的中渲染出来的图片还是电端页面的大小，加了权重的css样式也没用。

2019-08-12 10:29 负责人:无分享

9 个回复

最佳回复

DCloud_UNI_GSQ

看了你的代码，你的img，有两个style：

复制代码<img style="max-width:100%;height:auto;display:block;" class="rich_pages" data-ratio="4.146844660194175" data-s="300,640" data-src="https://mmbiz.qpic.cn/mmbiz_png/0NKvxhBCQtYcDxdhvcV4icickxh33OyVnJvhGDmg05rx0MK6S5TUxCu55WXYHic0Ey8ic1sulVr8fEiaOpwlB5THK2g/640?wx_fmt=png" data-type="png" data-w="824" style="" src="http://www.941bigdata.com.cn/wp-content/uploads/2019/06/bo-image-693756-1561460306-1.jpg"  />

另外你的img上有class，所以这样即可：

复制代码.rich_pages{  
    max-width:100%;  
}

1***@qq.com (作者)

非常感谢，已解决

2019-08-16 15:34

8***@qq.com

/deep/ img {max-width: 100%;}

DCloud_UNI_GSQ

测试未复现问题，请提供一个单独能复现问题的示例。

1***@qq.com (作者)

我上传了接口返回的内容，要怎样才能让里面的图片适合小程序端呢？麻烦你了

2019-08-12 11:18
1***@qq.com (作者)

老哥有空吗？

2019-08-13 10:16

1***@qq.com (作者)

这个是接口返回的内容

内容.rar

DCloud_UNI_GSQ

请提供能复现问题的demo项目工程，以及复现步骤

2019-08-12 11:24
1***@qq.com (作者)

回复 DCloud_UNI_GSQ: 好的，上传了，麻烦你看下

2019-08-12 11:36

1***@qq.com (作者)

demo项目工程

demo.rar

1***@qq.com (作者)

自己up

p***@163.com

用xxxx.replace('<img', '<img style="width:xxx;"')替换掉

1***@qq.com (作者)

有用这个方法，在h5和app端就正常，但是小程序还是老样子

2019-08-16 11:26
DCloud_UNI_GSQ

回复 1***@qq.com: 这次问题帮你解决，希望以后能认真一些。另外有时间不要一直顶自己的问题，也去帮助他人。

2019-08-16 14:46

IKEA - 小全栈一枚

大哥咋解决的，现在这个问题困扰好久了

1***@qq.com

还没解决吗，他的代码加上
.rich_pages{
max-width:100%;
}
生效，因为他的富文本绑了个rich_pages的class
替换字符串改成这样就行了
richtext.replace("<img", '<img style="max-width:100%;height:auto;" class="rich_pages"');

该问题目前已经被锁定, 无法添加新回复

uni-app小程序端富文本图片超出宽度

9 个回复

公告

相关问题

uni-app小程序端富文本图片超出宽度

与内容相关的链接

9 个回复

公告

相关问题