Row 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
Row of Four Images
<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>
Click to copy
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.
- Copy the code and paste it into the page in the HTML view.
- Switch to design view and add your first image.
- Select the image after it's added to the page, and
- add descriptive alt text and
- change the size to Percentage at 100.
- Add the next image and repeat steps A and B.
- Add image captions or delete the filler text.
- To add more than 3 images in a row, copy and paste the highlighted code above.
- Save the page.
0 Comments
Add your comment