# Foundation 圖片 Foundation 提供了響應式的圖片，可以創建縮略圖喝圖片彈窗：  ## 縮略圖 在 `&lt;img&gt;` 元素外添加 `&lt;a&gt;` 元素將圖片作為一個錨鏈接。 在 `&lt;a&gt;` 標簽中添加 `.th` 類將圖片設置為縮略圖。 鼠標移動到上面會顯示一個淺藍色外框: ### 實例 ``` <a href="paris.jpg" class="th"> ? <img src="paris.jpg" alt="Paris"> </a> ``` >  > **響應式圖片** > Foundation 中圖片默認是響應式的。我們可以在實例頁面重置瀏覽器大小來查看圖片縮放效果。 ## 圓角圖片 我們可以在 `.th` 類添加 `.radius` 類來設置圓角縮略圖： ### 實例 ``` <a href="paris.jpg" class="th radius"> ? <img src="paris.jpg" alt="Paris"> </a> ``` ## 簡潔的彈窗 Foundation 可以很容易實現圖片彈窗。 要創建一個彈窗可以在 `&lt;ul&gt;` 元素上添加 `.clearing-thumbs` 類及 `data-clearing` 屬性。在 `&lt;ul&gt;` 內添加圖片列表。 **注意:** 圖片彈窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。 ### 實例 ``` <ul class="clearing-thumbs" data-clearing> ? <li><a href="rock600x400.jpg" class="th"><img src="rock200x100.jpg"></a></li> ? <li><a href="skies600x400.jpg" class="th"><img src="skies200x100.jpg"></a></li> ? <li><a href="lights600x400.jpg" class="th"><img src="lights200x100.jpg"></a></li> </ul> <!-- Initialize Foundation JS --> <script> $(document).ready(function() { ??? $(document).foundation(); }) </script> ``` ## 圖片文本描述 可以添加 `data-caption` 屬性到每個圖片來設置圖片的描述: ### 實例 ``` <ul class="clearing-thumbs" data-clearing> ? <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li> ? <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li> ? <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li> </ul> ``` >  > **提示：** 你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="&lt;h2&gt;Pulpit Rock&lt;/h2&gt;&lt;p&gt;Located in Norway&lt;/p&gt;" ## 只顯示一張縮略圖 當你需要實現只顯示一張縮略圖時你可以在 `&lt;ul&gt;` 中使用 `.clearing-feature` 類并在`&lt;li&gt;` 中使用 `.clearing-featured-img` 類。 ### 實例 ``` <ul class="clearing-thumbs clearing-feature" data-clearing> ? <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li> ? <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li> ? <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li> </ul> ```