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

2019-02-18 16:19:18 +08:00
 pytth

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 的大小自适应屏幕大小。

8048 次点击
所在节点    程序员
5 条回复
pytth
2019-02-18 16:49:46 +08:00
已经解决了
xbj126
2019-03-02 18:21:49 +08:00
怎样解决的呀?我也遇到同样问题了,求教!
xbj126
2019-03-02 21:52:15 +08:00
pytth
2019-03-02 21:52:37 +08:00
@xbj126 在数据库 img 标签加宽度
xbj126
2019-03-03 10:16:04 +08:00
@pytth get !谢谢,看来只能后端处理了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/536184

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX