Solution to the problem that the image width in WeChat applet rich-text exceeds the range

Problem description: When writing a rich text display page, I found a problem, that is, the width of the picture exceeds the range. The instinctive reaction is to set a maximum width for the picture, but it is found that this is not feasible. Then using regular append styles still doesn't work.

// 使用正则提取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
				})

Solution :

Here you can use the attribute selector to give the src width of img 100%

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

solve: