element中走马灯高度适配内容的高度

浅浅的花香味﹌ 2022-10-01 15:52 163阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

*  先用一个图片撑起整个的高度，之后在循环遍历数组中的图片，饿了么的走马灯默认高度为300px 直接见下代码：

<el-carousel-item
                    v-for="(item,index) in dialogData.lookDetail.picList"
                    :key="index"
                  >
                    <img
                      class='width100'
                      @load="getHeight"
                      :src="item"
                      ref='image'
                      alt=""
                    >
                  </el-carousel-item>
    		//1、 撑起el-carousel__containe
                  <img :src="dialogData.lookDetail.picList[0]" class="toolImg" alt="">
                </el-carousel>
    		2、css:
    		.el-carousel__container{
    		  height: auto!important;
    		}
    		3、设置负责撑起容器的图片的css
    		 .toolImg{
    			width: 100%;
    			opacity: 0;
    		  }

转载于:https://my.oschina.net/u/3407699/blog/3033558

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/c61bab35fe924ca0b7d38e9b4c8da8df.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 element中表格高度怎么自适应浏览器窗口高度显示？

给你来个传送门的demo:[vue-template][] //store 里的缓存 const clientHeight = document.docu

偏执的太偏执、/ 2023年02月22日 07:53/ 0 赞/ 4 阅读

相关 Js获取屏幕宽度、高度移动端H5适配

```javascript document.body.clientWidth ==> BODY对象宽度 document.body.clientH

梦里梦外;/ 2023年01月15日 11:26/ 0 赞/ 692 阅读

相关固定高度然后超出的内容，让高度自动随着内容增加而增加

利用scrollHeight,获取元素的实际高度,然后进行判断,动态设置元素的高度度这个例子是`更多和收起`例子 <template> <d

电玩女神/ 2022年12月27日 14:30/ 0 赞/ 167 阅读

相关 iOS 2020iPhoneX、iPhone12刘海适配，底部安全区域高度

废话不多说直接上代码：方法一： //判断是否为iPhone X define IPHONE_X \ ({BOOL isPhoneX = NO;\

女爷i/ 2022年12月23日 12:26/ 0 赞/ 265 阅读

相关 element中走马灯高度适配内容的高度

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 先用一个图片撑起整个的高度，之后在循环遍历数组中的

浅浅的花香味﹌/ 2022年10月01日 15:52/ 0 赞/ 164 阅读

相关 element.getBoundingClientRect();进行获取高度

function getBoundingClientRect (element) { var rect = element.getBoundingClien

川长思鸟来/ 2022年05月23日 01:28/ 0 赞/ 252 阅读

相关 div高度根据内容物高度自适应的方法

示例： HTML中： <div class="lei"> <p>电脑</p> <ul> <li><b>台式

古城微笑少年丶/ 2022年01月31日 10:29/ 0 赞/ 477 阅读

相关 textarea高度自适应，随着内容增加高度增加

原文出处：[https://www.cnblogs.com/purple04551/p/8075366.html][https_www.cnblogs.com_purple04

女爷i/ 2022年01月15日 04:05/ 0 赞/ 318 阅读

相关微信小程序-自动适配屏幕高度和宽度

微信小程序里面的height和width有几种单位，分别是 `rpx` `px` `vh` 和 `vw`。 rpx > [https://developers.weix

末蓝、/ 2021年11月01日 05:06/ 0 赞/ 1087 阅读

相关移动端h5适配不同高度的机型，巨坑！！！

最近给公司做一个活动页面，遇到了一个没有遇到过的问题。我写了一个页面，在页面的最下面，有一个动态按钮，点击可以向下滑动，如下图 ![在这里插入图片描述][202005

女爷i/ 2021年09月24日 08:02/ 0 赞/ 476 阅读