element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
首先展示官網(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)用來演示）
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”）的格式來獲取圖片。
這個(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)并沒有變化，是因?yàn)?/p>
沒有指定圖片的width和height
所以我們?cè)偌由蠈傩岳?/p>
再次打開頁面檢查，成功！
圖片進(jìn)行了自適應(yīng)，可以完整顯示。
（跑馬燈的背景顏色都可以通過css屬性進(jìn)一步設(shè)置）
總結(jié)
到此這篇關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法的文章就介紹到這了,更多相關(guān)element-ui走馬燈配置圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Typescript 5年內(nèi)的熱度隨時(shí)間變化的趨勢，整體呈現(xiàn)一個(gè)上升的趨勢。也說明ts越來越️受大家的關(guān)注了。這篇文章主要介紹了Vue 中使用 typescript的方法詳解,需要的朋友可以參考下2020-02-02
本文通過實(shí)例代碼給大家介紹了vue 下列表側(cè)滑操作,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
Vue自定義復(fù)制指令 v-copy功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue自定義復(fù)制指令 v-copy,使用自定義指令創(chuàng)建一個(gè)點(diǎn)擊復(fù)制文本功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue項(xiàng)目中遇到的深拷貝淺拷貝問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue多組件倉庫開發(fā)與發(fā)布詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實(shí)都不是必須的，因?yàn)樵?Vue和React中不加key是不會(huì)報(bào)錯(cuò)的，只是會(huì)有警告。但是我們?cè)谏钊肓私饧觡ey的原因后會(huì)明白，若想確保沒有隱患的話，元素還是必須要加key屬性。2021-05-05
關(guān)于在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題,本文給大家分享完美解決方法，需要的朋友可以參考下2021-07-07