富文本编辑的图片在手机，移动端显示图片img太大，超出屏幕，出现滚动条，富文本中的图片如何修改样式

最新推荐文章于 2024-03-26 13:30:59 发布

原创最新推荐文章于 2024-03-26 13:30:59 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #正则表达式 #vue.js #前端

前端那些事专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在富文本编辑中遇到的图片在手机移动端显示过大的问题，导致滚动条出现。通过正则表达式，将所有img标签的宽度设置为100%，以实现图片自适应屏幕宽度，保持页面整洁。这种方法确保了移动端用户能有更好的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

富文本编辑的图片在手机，移动端显示图片太大，超出屏幕，出现滚动条，富文本中的图片如何修改样式

var html = res.data.details.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');