Foundation 提供了響應式的圖檔，可以建立縮略圖和圖檔彈窗：
在 <code><img></code> 元素外添加 <code><a></code> 元素将圖檔作為一個錨連結。
在 <code><a></code> 标簽中添加 <code>.th</code> 類将圖檔設定為縮略圖。 滑鼠移動到上面會顯示一個淺藍色外框:
<a href="paris.jpg" class="th">
<img src="paris.jpg" alt="Paris">
</a>
<b>響應式圖檔</b>
Foundation 中圖檔預設是響應式的。我們可以在執行個體頁面重置浏覽器大小來檢視圖檔縮放效果。
我們可以在 <code>.th</code> 類添加 <code>.radius</code> 類來設定圓角縮略圖：
<a href="paris.jpg" class="th radius">
Foundation 可以很容易實作圖檔彈窗。
要建立一個彈窗可以在 <code><ul></code> 元素上添加 <code>.clearing-thumbs</code> 類及 <code>data-clearing</code> 屬性。在 <code><ul></code> 内添加圖檔清單。
注意: 圖檔彈窗需要 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"
src="skies200x100.jpg"></a></li>
<li><a href="lights600x400.jpg"
src="lights200x100.jpg"></a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
可以添加 <code>data-caption</code> 屬性到每個圖檔來設定圖檔的描述:
<li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock"
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>
提示： 你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"
當你需要實作隻顯示一張縮略圖時你可以在 <code><ul></code> 中使用 <code>.clearing-feature</code> 類并在<code><li></code> 中使用 <code>.clearing-featured-img</code> 類。
<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"
<li
class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img
data-caption="Northern Lights" src="lights200x100.jpg"></a></li>