Foundation 圖片

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

縮略圖

在<img>元素外添加<a>元素將圖片作為一個錨鏈接。

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

	響應式圖片 Foundation 中圖片默認是響應式的。 我們可以在實例頁面重置瀏覽器大小來查看圖片縮放效果。

圓角圖片

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

簡潔的彈窗

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

要創建一個彈窗可以在<ul>元素上添加.clearing-thumbs類及data-clearing屬性。 在<ul>內添加圖片列表。

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

圖片文本描述

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

	提示：你可以在data-caption屬性中添加HTML元素，如data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"

只顯示一張縮略圖

當你需要實現只顯示一張縮略圖時你可以在<ul>中使用.clearing-feature類並在<li>中使用.clearing-featured-img類。