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%,高度自适应,也就是会保持图片的原始比例)。