Foundation 图片

Foundation 提供了多种处理图片的工具和类，帮助你创建响应式、美观的图片展示。本章将介绍 Foundation 图片相关的各种用法。

响应式图片

默认情况下，Foundation 让图片具有响应式特性：

<img src="https://via.placeholder.com/800x400" alt="响应式图片">

图片会自动缩放以适应容器宽度，不会超出容器边界。

图片缩略图

使用 .thumbnail 类创建带边框的缩略图：

<img class="thumbnail" src="https://via.placeholder.com/200x200" alt="缩略图">

链接缩略图

<a href="#">
    <img class="thumbnail" src="https://via.placeholder.com/200x200" alt="可点击的缩略图">
</a>

图片形状

圆角图片

<style>
    .rounded-image {
        border-radius: 10px;
    }
</style>

<img class="rounded-image" src="https://via.placeholder.com/200x200" alt="圆角图片">

圆形图片

<style>
    .circle-image {
        border-radius: 50%;
    }
</style>

<img class="circle-image" src="https://via.placeholder.com/200x200" alt="圆形图片">

图片浮动

<p>
    <img class="float-left" src="https://via.placeholder.com/150x150" alt="左浮动"
         style="margin-right: 15px; margin-bottom: 10px;">
    这是一段文字，图片在左侧浮动。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<p style="clear: both;">
    <img class="float-right" src="https://via.placeholder.com/150x150" alt="右浮动"
         style="margin-left: 15px; margin-bottom: 10px;">
    这是一段文字，图片在右侧浮动。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

图片网格

使用网格系统创建图片画廊：

<div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-4">
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="图片1">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="图片2">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="图片3">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="图片4">
    </div>
</div>

图片居中

<!-- 使用 text-center -->
<div class="text-center">
    <img src="https://via.placeholder.com/300x200" alt="居中图片">
</div>

<!-- 使用 margin auto -->
<img src="https://via.placeholder.com/300x200" alt="居中图片"
     style="display: block; margin: 0 auto;">

Orbit 轮播图

Foundation 提供了 Orbit 组件用于创建图片轮播：

<div class="orbit" role="region" aria-label="图片轮播" data-orbit>
    <div class="orbit-wrapper">
        <div class="orbit-controls">
            <button class="orbit-previous">
                <span class="show-for-sr">上一张</span>&#9664;
            </button>
            <button class="orbit-next">
                <span class="show-for-sr">下一张</span>&#9654;
            </button>
        </div>
        <ul class="orbit-container">
            <li class="is-active orbit-slide">
                <figure class="orbit-figure">
                    <img class="orbit-image" src="https://via.placeholder.com/800x400/1779ba/ffffff?text=Slide+1" alt="幻灯片1">
                    <figcaption class="orbit-caption">幻灯片 1 的说明文字</figcaption>
                </figure>
            </li>
            <li class="orbit-slide">
                <figure class="orbit-figure">
                    <img class="orbit-image" src="https://via.placeholder.com/800x400/3adb76/ffffff?text=Slide+2" alt="幻灯片2">
                    <figcaption class="orbit-caption">幻灯片 2 的说明文字</figcaption>
                </figure>
            </li>
            <li class="orbit-slide">
                <figure class="orbit-figure">
                    <img class="orbit-image" src="https://via.placeholder.com/800x400/cc4b37/ffffff?text=Slide+3" alt="幻灯片3">
                    <figcaption class="orbit-caption">幻灯片 3 的说明文字</figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <nav class="orbit-bullets">
        <button class="is-active" data-slide="0">
            <span class="show-for-sr">第一张幻灯片</span>
        </button>
        <button data-slide="1">
            <span class="show-for-sr">第二张幻灯片</span>
        </button>
        <button data-slide="2">
            <span class="show-for-sr">第三张幻灯片</span>
        </button>
    </nav>
</div>

Orbit 配置选项

<div class="orbit"
     data-orbit
     data-auto-play="true"
     data-timer-delay="5000"
     data-infinite-wrap="true"
     data-swipe="true"
     data-pause-on-hover="true">
    <!-- 轮播内容 -->
</div>

选项	说明	默认值
data-auto-play	自动播放	true
data-timer-delay	切换间隔（毫秒）	5000
data-infinite-wrap	无限循环	true
data-swipe	启用滑动	true
data-pause-on-hover	悬停暂停	true

图片覆盖层

创建带有文字覆盖层的图片：

<style>
    .image-overlay {
        position: relative;
        display: inline-block;
    }
    .image-overlay img {
        display: block;
    }
    .overlay-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 15px;
    }
    .overlay-full {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .image-overlay:hover .overlay-full {
        opacity: 1;
    }
</style>

<!-- 底部覆盖层 -->
<div class="image-overlay">
    <img src="https://via.placeholder.com/300x200" alt="图片">
    <div class="overlay-content">
        <h5 style="margin: 0;">图片标题</h5>
        <p style="margin: 0;">图片描述文字</p>
    </div>
</div>

<!-- 悬停覆盖层 -->
<div class="image-overlay">
    <img src="https://via.placeholder.com/300x200" alt="图片">
    <div class="overlay-full">
        <div class="text-center">
            <h4>悬停显示</h4>
            <a class="button small" href="#">查看详情</a>
        </div>
    </div>
</div>

响应式背景图

<style>
    .hero-banner {
        background-image: url('https://via.placeholder.com/1920x600');
        background-size: cover;
        background-position: center;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="hero-banner">
    <div class="text-center">
        <h1>欢迎来到我们的网站</h1>
        <p>这是一个响应式背景图片示例</p>
        <a class="button large" href="#">了解更多</a>
    </div>
</div>

延迟加载

使用 Interchange 实现响应式图片加载：

<img data-interchange="
    [https://via.placeholder.com/400x200, small],
    [https://via.placeholder.com/800x400, medium],
    [https://via.placeholder.com/1200x600, large]
" alt="响应式图片">

原生懒加载

<img src="https://via.placeholder.com/800x400" alt="懒加载图片" loading="lazy">

Figure 和 Figcaption

使用语义化标签：

<figure>
    <img src="https://via.placeholder.com/400x300" alt="示例图片">
    <figcaption>图片说明：这是一张示例图片</figcaption>
</figure>

样式化 Figure

<style>
    figure.styled {
        margin: 0;
        padding: 0;
        background: #f4f4f4;
        border-radius: 4px;
        overflow: hidden;
    }
    figure.styled img {
        width: 100%;
        display: block;
    }
    figure.styled figcaption {
        padding: 15px;
        font-style: italic;
        color: #666;
    }
</style>

<figure class="styled">
    <img src="https://via.placeholder.com/400x300" alt="示例图片">
    <figcaption>图片说明：这是一张示例图片</figcaption>
</figure>

完整示例

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 图片示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .circle-image { border-radius: 50%; }
        .rounded-image { border-radius: 10px; }

        .image-overlay {
            position: relative;
            display: inline-block;
            margin: 10px;
        }
        .image-overlay img { display: block; }
        .overlay-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
        }
        .overlay-full {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .image-overlay:hover .overlay-full { opacity: 1; }

        .hero-banner {
            background-image: url('https://via.placeholder.com/1920x400/1779ba/ffffff');
            background-size: cover;
            background-position: center;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-bottom: 30px;
        }

        figure.styled {
            margin: 0;
            background: #f4f4f4;
            border-radius: 4px;
            overflow: hidden;
        }
        figure.styled img { width: 100%; display: block; }
        figure.styled figcaption {
            padding: 15px;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="hero-banner">
        <div class="text-center">
            <h1>图片展示</h1>
            <p>Foundation 图片处理示例</p>
        </div>
    </div>

    <div class="grid-container">
        <div class="demo-section">
            <h3>缩略图</h3>
            <img class="thumbnail" src="https://via.placeholder.com/200x150" alt="缩略图1">
            <img class="thumbnail" src="https://via.placeholder.com/200x150" alt="缩略图2">
            <img class="thumbnail" src="https://via.placeholder.com/200x150" alt="缩略图3">
        </div>

        <div class="demo-section">
            <h3>图片形状</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4 text-center">
                    <img src="https://via.placeholder.com/200x200" alt="默认">
                    <p>默认（方形）</p>
                </div>
                <div class="cell medium-4 text-center">
                    <img class="rounded-image" src="https://via.placeholder.com/200x200" alt="圆角">
                    <p>圆角</p>
                </div>
                <div class="cell medium-4 text-center">
                    <img class="circle-image" src="https://via.placeholder.com/200x200" alt="圆形">
                    <p>圆形</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>图片网格</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-4">
                <div class="cell">
                    <img class="thumbnail" src="https://via.placeholder.com/300x200/1779ba/ffffff" alt="图片1">
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://via.placeholder.com/300x200/3adb76/ffffff" alt="图片2">
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://via.placeholder.com/300x200/ffae00/ffffff" alt="图片3">
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://via.placeholder.com/300x200/cc4b37/ffffff" alt="图片4">
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>图片覆盖层</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6">
                    <div class="image-overlay">
                        <img src="https://via.placeholder.com/400x250" alt="图片">
                        <div class="overlay-content">
                            <h5 style="margin: 0; color: white;">底部覆盖层</h5>
                            <p style="margin: 0;">这是图片的说明文字</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6">
                    <div class="image-overlay">
                        <img src="https://via.placeholder.com/400x250" alt="图片">
                        <div class="overlay-full">
                            <div class="text-center">
                                <h4>悬停显示</h4>
                                <a class="button small" href="#">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Figure 元素</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6">
                    <figure class="styled">
                        <img src="https://via.placeholder.com/500x300" alt="示例图片">
                        <figcaption>这是使用 figure 和 figcaption 的语义化图片展示</figcaption>
                    </figure>
                </div>
                <div class="cell medium-6">
                    <figure class="styled">
                        <img src="https://via.placeholder.com/500x300" alt="示例图片">
                        <figcaption>另一张带有说明的图片示例</figcaption>
                    </figure>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>轮播图 (Orbit)</h3>
            <div class="orbit" role="region" aria-label="图片轮播" data-orbit>
                <div class="orbit-wrapper">
                    <div class="orbit-controls">
                        <button class="orbit-previous"><span class="show-for-sr">上一张</span>&#9664;</button>
                        <button class="orbit-next"><span class="show-for-sr">下一张</span>&#9654;</button>
                    </div>
                    <ul class="orbit-container">
                        <li class="is-active orbit-slide">
                            <figure class="orbit-figure">
                                <img class="orbit-image" src="https://via.placeholder.com/1000x400/1779ba/ffffff?text=Slide+1" alt="幻灯片1">
                                <figcaption class="orbit-caption">第一张幻灯片说明</figcaption>
                            </figure>
                        </li>
                        <li class="orbit-slide">
                            <figure class="orbit-figure">
                                <img class="orbit-image" src="https://via.placeholder.com/1000x400/3adb76/ffffff?text=Slide+2" alt="幻灯片2">
                                <figcaption class="orbit-caption">第二张幻灯片说明</figcaption>
                            </figure>
                        </li>
                        <li class="orbit-slide">
                            <figure class="orbit-figure">
                                <img class="orbit-image" src="https://via.placeholder.com/1000x400/cc4b37/ffffff?text=Slide+3" alt="幻灯片3">
                                <figcaption class="orbit-caption">第三张幻灯片说明</figcaption>
                            </figure>
                        </li>
                    </ul>
                </div>
                <nav class="orbit-bullets">
                    <button class="is-active" data-slide="0"><span class="show-for-sr">第一张</span></button>
                    <button data-slide="1"><span class="show-for-sr">第二张</span></button>
                    <button data-slide="2"><span class="show-for-sr">第三张</span></button>
                </nav>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

图片最佳实践

1. 响应式图片：始终使用响应式图片或 srcset
2. Alt 属性：为所有图片提供有意义的 alt 文本
3. 懒加载：对非首屏图片使用懒加载
4. 压缩优化：使用适当的图片格式和压缩
5. 宽高比：保持图片的宽高比，避免变形

<!-- 使用 srcset 响应式图片 -->
<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="响应式图片示例">

总结

本章我们学习了：

• 响应式图片的基本用法
• 缩略图和各种图片形状
• 图片网格布局
• Orbit 轮播图组件
• 图片覆盖层效果
• 响应式背景图

下一章，我们将学习 Foundation 下拉菜单。

---

提示：图片是网页中重要的视觉元素，但也可能影响页面加载速度，务必进行适当的优化。