圖片來源

---

「圖片來源」支援三種設定方式：

1. 自行上傳圖片

   目前只支援上傳不超過 2 MB 的 jpg、jpeg、png 圖檔。

   

2. 輸入 URL

   不限圖片檔案格式或大小。

   

3. 網站商品圖片

   從站上 Product Feed 裡面找商品圖選擇。

   

圖片大小

---

▌設定圖片的寬度

• 新增圖片元件後，預設為「全寬顯示」，此時會依圖片所屬的上層 Column 的寬度，100% 顯示

  

• 關閉「全寬顯示」後，可自訂圖片的「最大寬度」：

  

  當頁面寬度超過最大寬度的值，圖片的寬度也只會依這個值顯示

  

  當頁面寬度小於最大寬度的值，圖片的寬度會依頁面寬度等比例縮小顯示

  

📘

2024/09/13 新升級後的設定面板：

▌設定圖片的高度

圖片的「顯示高度」無法直接設定，必須用「顯示寬度」和「圖片比例」二個設定項綜合回推，例如：

• 寬度 200 px、顯示比例為 1:1 時，圖片的高度即為 200/1*1 = 200 px
• 寬度 500 px、顯示比例為 4:3 時，圖片的高度即為 500/4*3 = 375 px

填滿效果＆圖片位置

---

改變圖片比例，使其從「原始」變成類似 1:1 或 16:9 這種值之後，相當於對圖片新增了「顯示高度」（或者說「顯示範圍」）的限制。（詳見：▌設定圖片的高度 ）

但圖片大小有可能超出這個「顯示範圍」，此時就會有部分圖片內容被 crop 掉無法完整顯示，可透過設定「填滿方式」和「定位」來調整呈現效果。

📘

2024/09/13 新升級的設定面板：

▌設定圖片在顯示範圍裡的填滿方式

透過「圖片填滿 Image fit」設定項，可決定圖片如何填滿這個顯示範圍。

1. 不做任何調整 (None)

   不一定會填滿顯示範圍，而是依圖片的實際尺寸大小，忠實呈現。

   

2. 等比例放大填滿 (Cover)

   必定填滿整個顯示範圍，且會依照指定比例填滿，不會變形。

   

3. 等比例完整顯示 (Contain)

   不一定會填滿整個顯示範圍，而是在顯示範圍裡面，依照指定比例盡可能呈現。

   

▌設定圖片在顯示範圍裡的定位

透過「圖片定位 Image position」設定項，可以決定圖片在超出顯示範圍時，要優先呈現哪個部分。概念類似發佈 Instagram 照片的時候，系統會先框出一個顯示範圍，我們再拖曳圖片，決定哪部分要秀出來、哪部分要放棄掉一樣。

• 水平定位效果展示：

  

  
  

  

  
  

  

  • 垂直定位效果展示：

    

    

    

    
    

❗️

注意：若圖片大小沒有超出顯示範圍，沒有任何部分會被截掉，那麼此時看不出設定「圖片定位」有什麼效果，是正常的。

▌設定圖片在上層容器裡的對齊方式

當圖片的顯示範圍窄於圖片元件的元件框時，可以決定圖片在元件框裡面的水平對齊效果。

❗️

注意：若圖片的顯示範圍填滿了整個元件框的寬度，沒有任何寬度留白的部分，那麼此時看不出設定「圖片對齊」有什麼效果，是正常的。