微信小程序rich-text富文本 图片自适应宽度

后端处理,最方便

一种方法:接口里给img标签加样式(PHP)

$info['contents'] = str_replace(" 第二种方法:小程序里给img标签加样式

that.setData({
    //富文本内容
    contents: res.data.contents.replace(/\ })
--------------------- 
作者:李维山 
来源:CSDN 
原文:https://blog.csdn.net/msllws/article/details/84636762 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

又参考了1个,方法一样

这个是wxml里富文本

 

这个写在js里:

var _that =this;

_that.setData({

detail_tb: res.data.replace(/\

})

重点是横线的部分res.data是我从后台获取放在rich-text里的数据

 

content字段前,加上1个style,试过了可能不太行。

假设存富文本的字段为content,则在SQL语句中进行拼接返回给APP端:

CONCAT(content,'')

 

还有1个相关的

 

写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况:

不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。

那是不是就这这么简单完事儿了呢?如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。 
假如你介意 图片放大后会失真,我们可以改进上面的代码,只需要将img的样式简单修改.

img{max-width:100%;max-height:100%;}

 

max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽,在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的,所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小,更通俗的讲就是只允许缩小不允许放大img。

具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定,另外在响应式设计中这个问题稍微会复杂一点。

 

图片大小自适应、pc端、手机端

图片适应手机端  要控制的是装图片的容器宽度

 img{
display: block;(可不加 banner可以用)
height: auto;
max-width: 100%;(或者width:100%)
}
将以上标签加入之后保存,再用手机打开即是自适应网页了。

https://blog.csdn.net/a772116804/article/details/79045927

你可能感兴趣的:(工作问题)