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