最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

微信小程序rich-text图片宽高自适应的方法介绍(rich-text富文本)

HTML5 太平洋学习网 浏览 评论

rich-text是微信小程序的富文本标签,在使用rich-text的时候,需要rich-text内部图片宽高自适应,这个时候该怎么做呢?先来看下案例:

<view class="contentLine">
    <rich-text nodes="{{content}}"></rich-text>
</view>

上面是一个rich-text富文本在wxml中的使用示例,这个时候我们需要给它设置content参数,content就是一个富文本内容,在js中可以这样设置:

onLoad: function (options) {
	var mycontent = "<img src='https://www.tpyyes.com/cat.jpg'/>";
	mycontent = mycontent.replace(/\<img/gi, '<img style="width:100%;height:auto"');
	this.setData({
	  content: mycontent
	});
}

上面是rich-text设置富文本内容的方法,如果内容没有经过replace替换的话,图片会超出屏幕范围,想要实现rich-text内部图片自适应,就需要把<img>标签的style属性中加入“width:100%;height:auto” (宽度100%,高度自适应,也就是会保持图片的原始比例)。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/799.html

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论