uni-app 渲染富文本，图片自适应屏幕的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2140 天前的主题，其中的信息可能已经有所发展或是发生改变。

index.vue

<template>
	<view class="content">
        <view class="ricetext">
        	<rich-text :nodes="item.zhengwen"></rich-text>
        </view>
	</view>
</template>

index.css

.content .ricetext{
	width: 90%;
	margin:5px auto 20px;
	text-align: justify;
	font-size: 17px;
}

.content .ricetext img{
	width: 300px;
}

这样写 css，图片还是没有受到影响，还会以原来的尺寸溢出 90%外面。接口返回的 json 格式数据如下：

[{"id":"3115","resname":"\u5f00\u53d1\u6d4b\u8bd5...","resint":"\u4fee\u6539 2019-02-18","resurl":0,"fangwl":"1","cang":"0","liuyannum":"0","dianzan":"0","zhengwen":"<p><img src=\"http:\/\/bpic.588ku.com\/art_origin_min_pic\/18\/11\/30\/b26b5b7eba8ab2ebc0339126bfde4669.jpg\"\/><\/p><p><br\/><\/p><p>\u91cc\u5ba2\u4e91\u6b63\u5728\u5f00\u53d1APP\uff0c\u8fd9\u6761\u4e3a\u6d4b\u8bd5\u6570\u636e\uff0c\u5927\u5bb6\u53ef\u4ee5\u5ffd\u7565\uff01\uff01\uff01<\/p>"}]

我只是想让 img 的大小自适应屏幕大小。

5 条回复 • 2019-03-03 10:16:04 +08:00