关于微信小程序rich-text中图片宽度超出范围解决办法

问题描述:写一个富文本展示页面时发现一个问题,就是图片宽度超出范围,本能反应是给图片设置一个最大宽度,这里发现不可行。然后又使用正则追加样式还是不行。

javascript 复制代码
// 使用正则提取html里面的图片设置图片最大宽度为100%
res[1].data[0].f_content =res[1].data[0].f_content.replace(/<img[^>]*>/gi, function (match, capture) {
			return match.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/ig, 
            'style="max-width:100%;height:auto;"') // 替换style
				})

解决方法:

这里可以利用属性选择器,给img的src宽度100%

css 复制代码
.content_richText [src]{
		max-width: 100%;
	}

解决:

相关推荐
chaosama21 分钟前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww1 小时前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
ALLSectorSorft3 小时前
上门服务小程序会员系统框架设计
小程序·apache
甜甜的资料库5 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
说私域11 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
人工智能·小程序·开源·零售
Uyker21 小时前
微信小程序动态效果实战指南:从悬浮云朵到丝滑列表加载
前端·微信小程序·小程序
happyCoder1 天前
uniapp 微信小程序实现定时消息订阅提醒(前后端)
微信小程序
Uyker1 天前
从零开始制作小程序简单概述
前端·微信小程序·小程序
打小就很皮...2 天前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
说私域2 天前
定制开发开源AI智能名片驱动下的海报工厂S2B2C商城小程序运营策略——基于社群口碑传播与子市场细分的实证研究
人工智能·小程序·开源·零售