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

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

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

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

解决方法

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

.content_richText [src]{
		max-width: 100%;
	}

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

你可能感兴趣的:(微信小程序,小程序)