亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2023-03-23 16:51:22 來源:億速云 閱讀:201 作者:iii 欄目:開發技術

這篇文章主要介紹“element-plus/element-ui走馬燈配置圖片及圖片自適應的方法”,在日常操作中,相信很多人在element-plus/element-ui走馬燈配置圖片及圖片自適應的方法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”element-plus/element-ui走馬燈配置圖片及圖片自適應的方法”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

首先展示官網給的模板

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h4 text="2xl" justify="center">{{ item }}</h4>
    </el-carousel-item>
  </el-carousel>
</template>
 
<style scoped>
.el-carousel__item h4 {
  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動態接收填裝圖片,這里直接調用來演示)

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

 step1:

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

step2:

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

這里我將圖片儲存在靜態資源assets中,需要用到require(“@/xxxx/xxxx”)的格式來獲取圖片。

這個時候我們發現,只進行這兩步,圖片成功裝進去了,但是大小并不合適。

目標2:圖片自適應

 step3:

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

像這樣子:

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

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

object-fit: scale-down; 

該屬性詳細:

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

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

但此時我們發現并沒有變化,是因為

沒有指定圖片的width和height

所以我們再加上屬性例如

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

再次打開頁面檢查,成功!

到此,關于“element-plus/element-ui走馬燈配置圖片及圖片自適應的方法”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

蓝山县| 密山市| 道孚县| 白朗县| 揭西县| 馆陶县| 汝城县| 斗六市| 明溪县| 兖州市| 黔西| 娱乐| 汤原县| 舒兰市| 汉川市| 南丰县| 湖口县| 扎兰屯市| 胶南市| 湛江市| 巫溪县| 东阳市| 柳江县| 双鸭山市| 永胜县| 河源市| 玉环县| 建平县| 遵义市| 遂川县| 名山县| 佛学| 荆州市| 玉屏| 北宁市| 雷州市| 灵武市| 台安县| 黄浦区| 周宁县| 高州市|