91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

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

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

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

方正县| 新建县| 惠水县| 德兴市| 岳西县| 晋州市| 永新县| 永康市| 竹溪县| 宾阳县| 广宗县| 平阴县| 罗山县| 平谷区| 西青区| 丰台区| 静宁县| 卢龙县| 墨江| 石台县| 定远县| 津市市| 宁津县| 湘潭市| 乾安县| 桐庐县| 东乡| 揭东县| 古丈县| 红原县| 施甸县| 潜江市| 肃北| 长顺县| 龙井市| 旅游| 无为县| 晋城| 海盐县| 兴文县| 突泉县|