element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法
更新時間：2023年03月23日 15:48:16 作者：STATICHIT靜砸
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關于element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
首先展示官網(wǎng)給的模板
<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>目標一：插入圖片
（后續(xù)可以用props動態(tài)接收填裝圖片，這里直接調用來演示）
step1：
我們把v-for內容改為【item in imgList】，從我們自己設置的集合里取數(shù)據(jù)，其中動態(tài)綁定的：key也是從imgList集合中取。
step2：
在data中，我們設置imgLisy集合，每個元素包含id和圖片地址。
這里我將圖片儲存在靜態(tài)資源assets中，需要用到require（“@/xxxx/xxxx”）的格式來獲取圖片。
這個時候我們發(fā)現(xiàn)，只進行這兩步，圖片成功裝進去了，但是大小并不合適。
如圖：
目標2：圖片自適應
step3:
很多博客里給出的方法都太麻煩了，先要獲取瀏覽器大小，又要進行運算設置高度什么的。
像這樣子：
其實我們可以一個css屬性解決：
object-fit: scale-down;
該屬性詳細：
object-fit - CSS（層疊樣式表） | MDN (mozilla.org)
但此時我們發(fā)現(xiàn)并沒有變化，是因為
沒有指定圖片的width和height
所以我們再加上屬性例如
再次打開頁面檢查，成功！
圖片進行了自適應，可以完整顯示。
（跑馬燈的背景顏色都可以通過css屬性進一步設置）
總結
到此這篇關于element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法的文章就介紹到這了,更多相關element-ui走馬燈配置圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue項目開啟gzip壓縮功能的相關資料,gizp壓縮是一種http請求優(yōu)化方式,通過減少文件體積來提高加載速度,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁面,實現(xiàn)方式是將其他頁面作為組件傳入，在父頁面將該組件引入到彈框內，實例代碼簡單易懂需要的朋友可以參考下2022-11-11
vue項目中,前端使用axios與后臺進行數(shù)據(jù)請求或者提交的時候,如果后臺沒有設置跨域,瀏覽器做數(shù)據(jù)請求的時候就會報錯,這篇文章主要給大家介紹了關于vue如何解決axios請求前端跨域問題的相關資料,需要的朋友可以參考下2021-10-10
vue+webpack模擬后臺數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺數(shù)據(jù)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vite.config.js是Vite框架中的配置文件,用于配置項目的構建和運行時的行為,下面這篇文章主要給大家介紹了關于vite項目vite.config.js詳細配置的相關資料,需要的朋友可以參考下2023-05-05
在后臺管理系統(tǒng)中,經(jīng)常需要在多個頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了如何通過一篇文章學會Vue中間件管道的相關資料,什么是中間件管道？中間件管道是一堆不同的中間件并行運行,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
這篇文章主要介紹了vue從使用到源碼實現(xiàn)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09