element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法

Posted on by

首先展示官網給的模板

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>
 
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
 
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
 
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

目標一：插入圖片

（後續可以用props動態接收填裝圖片，這裡直接調用來演示）

 step1：

我們把v-for內容改為【item in imgList】，從我們自己設置的集合裡取數據，其中動態綁定的：key也是從imgList集合中取。

step2：

在data中，我們設置imgLisy集合，每個元素包含id和圖片地址。

這裡我將圖片儲存在靜態資源assets中，需要用到require（“@/xxxx/xxxx”）的格式來獲取圖片。

這個時候我們發現，隻進行這兩步，圖片成功裝進去瞭，但是大小並不合適。

如圖：

目標2：圖片自適應

 step3:

很多博客裡給出的方法都太麻煩瞭，先要獲取瀏覽器大小，又要進行運算設置高度什麼的。

像這樣子：

其實我們可以一個css屬性解決：

object-fit: scale-down; 

該屬性詳細：

object-fit – CSS（層疊樣式表） | MDN (mozilla.org) 

但此時我們發現並沒有變化，是因為

沒有指定圖片的width和height

所以我們再加上屬性例如

再次打開頁面檢查，成功！

圖片進行瞭自適應，可以完整顯示。

（跑馬燈的背景顏色都可以通過css屬性進一步設置）

總結 

到此這篇關於element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法的文章就介紹到這瞭,更多相關element-ui走馬燈配置圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：