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