vue下elementui輪播圖自適應高度問題怎么解決

本篇內容主要講解“vue下elementui輪播圖自適應高度問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue下elementui輪播圖自適應高度問題怎么解決”吧!

elementui輪播圖自適應高度

翻了下api 沒有找到對應的屬性，所以這里用自定義方法來實現

<el-carousel :interval="5000" arrow="never" :height="autoHeight">
     <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <a :href="banner.extra.tourl" rel="external nofollow" >
            <img :src="banner.imgurl" :title="banner.title" class="max-img">
        </a>
     </el-carousel-item>
  </el-carousel>

我們取的banner 是在750像素下高度為145px

 getAutoHeight(){
     let _w = document.documentElement.clientWidth || document.body.clientWidth; ; 
     this.autoHeight = _w * 145 / 375 + 'px';
  }

elementui輪播圖自適應的最簡單實現

相信用過element ui組件庫的人肯定都有用到輪播圖，關于大小官方只提供了一個height屬性，字符串類型，也就是說可以使用vh、vw等自適應單位。

我看到網上大部分人都是通過js監聽瀏覽器寬高、圖片大小去設置一個值，千篇一律…… 今天我來給大家分享一個更加簡單快捷的方法：

 <div class="slide_pc">
         <el-carousel trigger="click" height="37vw" @change="loadAnimate"  :interval="5000" arrow="hover">
            <el-carousel-item v-for="(item,index) in imgurl" :key="index">
              <figure>
                <img :src="item" />
              </figure>
            </el-carousel-item>
          </el-carousel>
          <!-- <slider-show :slides="sliders" :inv="invTime"></slider-show> -->
    </div>

我給它的單位是vw，然后圖片標簽加上以下樣式就可以了：

width: 100%; height: auto;

到此，相信大家對“vue下elementui輪播圖自適應高度問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！