微信小程序 图片自适应高度 宽度 完美适配原生或者uniapp

 

--

-

-

-

查了一下百度看到网上图片高度自适应的解决方案

基本是靠JS获取图片的宽度进行按比例计算得出图片高度。

不是很符合我的需求/

于是我脑瓜子一转 想到一种新的解决方案 不用JS计算也能完美解决。

我写了一个组件，直接导入可以使用。

-

-

-

1.新建一个组件bl-adaptation-img.vue

2.在main.js中导入

// 自适应图片图片高度 宽度100%
import blAdaptationImg from '@/components/baseUI/bl-adaptation-img/index.vue'
Vue.component('bl-adaptation-img', blAdaptationImg);

 3.编写组件代码

/**
 * 微信公众号小程序商城系统!
 * Copyright © 2024 保留所有权利
 * =========================================================
 * 版本：V1
 * 授权主体：chenfeili
 * 授权域名：*****
 * 授权码：*******
 * ----------------------------------------------
 * 您只能在商业授权范围内使用，不可二次转售、分发、分享、传播
 * 未经授权任何企业和个人不得对代码以任何目的任何形式的再发布
 * =========================================================
 */

目前使用的是uniapp的富文本组件bctos-rich-text    如果是原生的小程序可以使用

4.在页面文件中使用