㈠ 微信小程序 rich-text 富文本图片自适应
<p :class="item.isMore == true ? 'richText' : 'minH'" v-if="isShow"
v-html="contentConv(item.storyContent)">
</p>
直接在css中加max-width:100%;height:auto; 。没有生效
方式一：在style中追加 max-width:100%;height:auto; ，此方法优点灵活，对于content中所有图片都起作用
// 文章html正则追加max-width
contentConv(content) {
return content.replace(/<(img).*?(\/>|<\/img>)/g, function(mats) {
if (mats.indexOf('style') < 0) {
return mats.replace(/<\s*img/, '<img style="max-width:100%;height:auto;"');
} else {
return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;')
}
});
},
方式二：此方法会破坏图片设置的样式，再设置style="max-width:100%;height:auto;"
contentConv(content) {
return content.replace(/<img[^>]*>/gi, function (match, capture) {
return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%;height:auto;"') // 替换style
});
}
㈡ 微信公众平台图文编辑中如何让图片不要自适应手机满屏而是好像截图中的那种图片尺寸。整齐归一
在编辑界面上把鼠标放在图片上，会显示“取消自动适应屏幕”，点击即可，图片会自动显示原始大小
㈢ 微信公众平台上怎么改图片尺寸
1、首先，登陆微信公众平台，新建图文消息，并且插入图片，用鼠标左键在图片上单击一下。
㈣ 微信网站图片设为width:100% height:auto 能自适应屏幕,但是图片变模糊了
其实，是照片的聚焦点不同，你看的聚焦点不是这里，而1100*2000的，是聚焦点在你这里，还有一种，就是没有聚焦点