品牌宣传型网站,响应式网站 翻译,网站备案号,手机平板购物网站的设计背景--
-
-
-
查了一下百度看到网上图片高度自适应的解决方案
基本是靠JS获取图片的宽度进行按比例计算得出图片高度。
不是很符合我的需求/
于是我脑瓜子一转 想到一种新的解决方案 不用JS计算也能完美解决。
我写了一个组件#xff0c;直接导入可以使用。
-
-
- 1.新… --
-
-
-
查了一下百度看到网上图片高度自适应的解决方案
基本是靠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* 授权域名****** 授权码******** ----------------------------------------------* 您只能在商业授权范围内使用不可二次转售、分发、分享、传播* 未经授权任何企业和个人不得对代码以任何目的任何形式的再发布* */templatebctos-rich-text v-ifnodes :nodesnodes/bctos-rich-text
/templatescriptexport default {props: {imgURl: {type: String,default: }},data() {return {nodes: }},watch: {imgURl: {handler(val) {this.nodes val ? img src${val} stylemax-width:100%;height:auto;/ : },immediate: true,deep: true}}}
/scriptstyle langscss scoped
/style
目前使用的是uniapp的富文本组件bctos-rich-text 如果是原生的小程序可以使用 rich-text/rich-text
4.在页面文件中使用
view v-ifcaateInfo.flow_img classmt-30 pl-30 pr-30bl-adaptation-img :imgURlcaateInfo.flow_img/bl-adaptation-img
/view
