Row of Resizable Images

Code Snippet Library

Use with cautionRow of Resizable Images

This code uses the grid-row class so that when the page is viewed at different widths, the images decrease in size rather than reformat to display vertically. Resize this page to see how it works.

Row of Three Images

portrait of a young man with sunglasses smiling
Sean
portrait of a young woman with long wavy hair
Sarah
portrait of an older man with glasses
Phil

Row of Four Images

portrait of a young man with dark hair and glasses
Michael
portrait of a woman with long brown hair and brown eyes
Linda
portrait of a young woman with brown hair in a ponytail and a smile
Jenna
portrait of a man with short, dark hair and brown eyes
Andy
Code to Copy 
<div style="display: flex;">
    <div class="grid-row" style="grid-gap: 5%; margin: 1rem 0; width: 100%;">
        <div class="col-xs" style="padding: 0;">
            <figure style="margin: 0;"><img style="width: 100%;" src="Image Source URL" alt="descriptive text" />
                <figcaption>Image Caption</figcaption>
            </figure>
        </div>
        <div class="col-xs" style="padding: 0;">
        <figure style="margin: 0;"><img style="width: 100%;" src="Image Source URL" alt="descriptive text" />
                <figcaption>Image Caption</figcaption>
            </figure>
        </div>
        <div class="col-xs" style="padding: 0;">
        <figure style="margin: 0;"><img style="width: 100%;" src="Image Source URL" alt="descriptive text" />
                <figcaption>Image Caption</figcaption>
            </figure>
        </div>
    </div>
</div>

Use this code with caution. It is dependent on an Instructure class, but if that class stops working the images will still display in a vertical format if the page is resized.

When using this code, make sure images have the same aspect ratio or they will not align correctly. 

  1. Copy the code and paste it into the page in the HTML view.
  2. Switch to design view and add your first image.
  3. Select the image after it's added to the page, and
    1. add descriptive alt text and
    2. change the size to Percentage at 100.
  4. Add the next image and repeat steps A and B.
  5. Add image captions or delete the filler text.
  6. To add more than 3 images in a row, copy and paste the highlighted code above.
  7. Save the page.