Foundation Images

Foundation provides various tools and classes for handling images, helping you create responsive and beautiful image displays. This chapter will introduce various uses of Foundation images.

Responsive Images

By default, Foundation makes images responsive:

<img src="https://via.placeholder.com/800x400" alt="Responsive image">

Images automatically scale to fit the container width without exceeding container boundaries.

Image Thumbnails

Use the .thumbnail class to create bordered thumbnails:

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

Linked Thumbnails

<a href="#">
    <img class="thumbnail" src="https://via.placeholder.com/200x200" alt="Clickable thumbnail">
</a>

Image Shapes

Rounded Images

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

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

Circular Images

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

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

Image Float

<p>
    <img class="float-left" src="https://via.placeholder.com/150x150" alt="Float left"
         style="margin-right: 15px; margin-bottom: 10px;">
    This is text with an image floating on the left. 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="Float right"
         style="margin-left: 15px; margin-bottom: 10px;">
    This is text with an image floating on the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Image Grid

Create image galleries using the grid system:

<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="Image 1">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="Image 2">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="Image 3">
    </div>
    <div class="cell">
        <img class="thumbnail" src="https://via.placeholder.com/300x200" alt="Image 4">
    </div>
</div>

Centered Images

<!-- Using text-center -->
<div class="text-center">
    <img src="https://via.placeholder.com/300x200" alt="Centered image">
</div>

<!-- Using margin auto -->
<img src="https://via.placeholder.com/300x200" alt="Centered image"
     style="display: block; margin: 0 auto;">

Orbit Carousel

Foundation provides the Orbit component for creating image carousels:

<div class="orbit" role="region" aria-label="Image carousel" data-orbit>
    <div class="orbit-wrapper">
        <div class="orbit-controls">
            <button class="orbit-previous">
                <span class="show-for-sr">Previous</span>&#9664;
            </button>
            <button class="orbit-next">
                <span class="show-for-sr">Next</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="Slide 1">
                    <figcaption class="orbit-caption">Caption for slide 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="Slide 2">
                    <figcaption class="orbit-caption">Caption for slide 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="Slide 3">
                    <figcaption class="orbit-caption">Caption for slide 3</figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <nav class="orbit-bullets">
        <button class="is-active" data-slide="0">
            <span class="show-for-sr">First slide</span>
        </button>
        <button data-slide="1">
            <span class="show-for-sr">Second slide</span>
        </button>
        <button data-slide="2">
            <span class="show-for-sr">Third slide</span>
        </button>
    </nav>
</div>

Orbit Configuration Options

<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">
    <!-- Carousel content -->
</div>

Option	Description	Default
data-auto-play	Auto play	true
data-timer-delay	Transition interval (ms)	5000
data-infinite-wrap	Infinite loop	true
data-swipe	Enable swipe	true
data-pause-on-hover	Pause on hover	true

Image Overlays

Create images with text overlays:

<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>

<!-- Bottom overlay -->
<div class="image-overlay">
    <img src="https://via.placeholder.com/300x200" alt="Image">
    <div class="overlay-content">
        <h5 style="margin: 0;">Image Title</h5>
        <p style="margin: 0;">Image description text</p>
    </div>
</div>

<!-- Hover overlay -->
<div class="image-overlay">
    <img src="https://via.placeholder.com/300x200" alt="Image">
    <div class="overlay-full">
        <div class="text-center">
            <h4>Hover to Show</h4>
            <a class="button small" href="#">View Details</a>
        </div>
    </div>
</div>

Image Best Practices

1. Responsive Images: Always use responsive images or srcset
2. Alt Attributes: Provide meaningful alt text for all images
3. Lazy Loading: Use lazy loading for below-the-fold images
4. Optimization: Use appropriate image formats and compression
5. Aspect Ratio: Maintain image aspect ratio to avoid distortion

<!-- Using srcset for responsive images -->
<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="Responsive image example">

Summary

In this chapter, we learned:

• Basic usage of responsive images
• Thumbnails and various image shapes
• Image grid layouts
• Orbit carousel component
• Image overlay effects
• Responsive background images

Next chapter, we will learn about Foundation Dropdowns.

---

Tip: Images are important visual elements on web pages, but they can also affect page load speed, so proper optimization is essential.