Foundation 圖片

Foundation 提供了回應式的圖片， 可以創建縮略圖和圖片彈窗：

縮略圖

在 元素外添加 元素將圖片作為一個錨連結。

在 標籤中添加 .th 類將圖片設置為縮略圖。 滑鼠移動到上面會顯示一個淺藍色外框:

圓角圖片

我們可以在 .th 類添加 .radius 類來設置圓角縮略圖：

實例

簡潔的彈窗

Foundation 可以很容易實現圖片彈窗。

要創建一個彈窗可以在

元素上添加 .clearing-thumbs 類及 data-clearing 屬性。 在
內添加圖片清單。

注意: 圖片彈窗需要 JavaScript。 所以使用它前需要初始化 Foundation JS。

實例

• 
• 
• 

嘗試一下 »

圖片文本描述

可以添加 data-caption 屬性到每個圖片來設置圖片的描述:

實例

• 
• 
• 

只顯示一張縮略圖

當你需要實現只顯示一張縮略圖時你可以在

中使用 .clearing-feature 類並在
• 中使用 .clearing-featured-img類。

  實例

  • 
  • 
  • 

  回應式圖片

  Foundation 中圖片預設是回應式的。我們可以在實例頁面重置流覽器大小來查看圖片縮放效果。

  提示：

  你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="

  Pulpit Rock

  Located in Norway

  "
• 

只顯示一張縮略圖

當你需要實現只顯示一張縮略圖時你可以在

中使用 .clearing-feature 類並在
• 中使用 .clearing-featured-img類。

  實例

  • 
  • 
  • 

  回應式圖片

  Foundation 中圖片預設是回應式的。我們可以在實例頁面重置流覽器大小來查看圖片縮放效果。

  提示：

  你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="

  Pulpit Rock

  Located in Norway

  "