从接口获取的是富文本，富文本中的图片太大溢出屏幕的解决办法（针对浏览器及微信小程序）

黑布林吕子

已于 2023-11-10 17:31:57 修改

阅读量2.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： uniapp css 文章标签： servlet

于 2022-08-25 16:08:24 首次发布

本文链接：https://blog.csdn.net/weixin_52276970/article/details/126526503

uniapp 同时被 2 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了如何解决通过接口获取的图片尺寸过大导致超出屏幕显示范围的问题。提供了多种解决方案，包括CSS原生方法、SCSS方法及微信小程序的特定实现。

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

从上面可以看到，从接口获得的图片尺寸过大，已经超出了屏幕

解决方法：可以通过‘>>>’ 属性穿透的办法解决

1、css原生

<view class="lawintro">
			<view class="text2">律所介绍</view>
			<view class="text3">
				<rich-text :nodes="detail.text_content"> </rich-text>//接口
			</view>
		</view>

//css 例如 修改text3富文本接口里面的图片
.text3>>>img { 
    width: 100%;
}

2、如果使用了scss

.text3{
  ::v-deep img {
    width: 100%;
  }
}

上面两种方法是针对浏览器的，修改微信小程序的方法如下（使用属性选择器，使用的属性为img的描述属性alt，<img src='...' alt='' id='123' />）

如果再解决不了，这样

<rich-text :nodes="format(要转换的参数)"></rich-text>

format(html) {
				var GRT = [
					// img 样式
					['img', "max-width:100%;height:auto;"],
				];
				for (let i = 0; i < GRT.length; i++) {
					html = html.replace(new RegExp('<' + GRT[i][0] + '>|<' + GRT[i][0] + ' (.*?)>', 'gi'), function(word) {
						// 分析 dom 上是否带有 style=""
						if (word.indexOf('style=') != -1) {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1style="$2 ' + GRT[i][1] + '"$3$4>');
						} else {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1 style="' + GRT[i][1] + '$2">');
						}
					});
				}
				return html;
			},

效果：可以看到图片不会再溢出