為什麼要使用圖片容器？

過去如果要在圖片上疊加文字等內容，只能在 Section／Row／Column 等結構容器元件身上設定背景底圖，再往它們的內部拖放內容。

這有幾個限制：

❌️ 背景底圖無法設定 URL 超連結

❌️ 背景底圖無法設定 Alt Text 給搜尋引擎讀取

❌️ 背景底圖無法直接設定寬高，需要透過 padding/margin 來撐大結構容器元件的顯示範圍

而圖片容器元件可以在外層容器直接設定圖片，再往容器內部新增內容。

這有幾個好處：

✅️ 圖片容器這一層的圖片可以設定 URL 超連結

✅️ 圖片容器這一層的圖片可以設定 Alt Text 給搜尋引擎讀取

✅️ 圖片容器這一層的圖片可以直接設定寬高和比例，比較適合 RWD

操作方式

從左側元件庫拖曳新增到畫布
設定「圖片容器 Image box」這一層的圖片（基本操作和「圖片 Image」一模一樣）
- 在 [設定] tab > [內容] 段落：
  - 圖片來源
    
    有三種上傳方式：自行上傳檔案、輸入 URL、選擇站上商品圖。
  - 圖片寬度
    
    預設為 100%，此時會繼承上層結構的寬度，也可以手改成 N px。
  - 顯示更多設定 > 圖片比例
    
    預設為「原始」。只有限制比例、使圖片可能無法完整顯示時，才會衍生出「圖片填滿」和「圖片定位」兩個控制項。
  - 顯示更多設定 > 圖片填滿
    
    決定圖片如何填滿顯示範圍。
  - 顯示更多設定 > 圖片在顯示範圍裡的定位
    
    當圖片大小超出顯示範圍、有部分內容被 crop 截斷時，可改變圖片的定位基準點來調整呈現效果。
- 在 [樣式] tab > [對齊] 段落：
  - 水平對齊
    
    當圖片的顯示範圍窄於圖片容器的元件框時，可以決定圖片在元件框裡面的水平對齊效果。但如果圖片和元件框一樣寬，沒有任何水平留白的空間，那麼此時看不出設定「水平對齊」有什麼效果，是正常的。
往容器內部拖入想要的內容
回到「圖片容器 Image box」這一層，改變內容物的對齊方式
- 在 [設定] tab > [排版] 段落：
  - 子元件在容器裡的定位
    
    當內容物子元件的元件框窄於圖片容器的圖片顯示範圍時，可以決定這些子元件在圖片容器裡面的水平對齊效果。但如果子元件的元件框和圖片容器的圖片顯示範圍一樣寬，沒有任何水平留白的空間，那麼此時看不出設定「水平對齊」有什麼效果，是正常的。

其他注意事項

圖片容器內部不支援放入下列內容：
- 區段 (Section)
- 商品列表 (Product list)
- 分類列表 (Category list)
- Instagram 藝廊 (Instagram gallery)
- 其他的圖片容器 (Image box)
匯出 Email HTML 時，因 Email 格式並不支援在圖上疊加內容，圖片容器的內容物會改出現在圖片外側的下方

使用範例：可點擊的 Hero Banner

在「圖片容器」這一層，設定底圖
在「圖片容器」這一層，打開遮罩，顏色設為 #000000、透明度設為 40%
在「圖片容器」這一層，設定 URL 超連結
往容器內部拖入「標題」和「文字」，再切換到 [樣式] tab 把文字顏色改成 #FFFFFF
在 [樣式] tab 調整文字對齊為「置左」、左側內邊距為「40px」