㈠ 微信小程序 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的，是聚焦點在你這里，還有一種，就是沒有聚焦點