Creating Flexible Collections of Images

You now know several ways to make individual images flexible to either their parent’s dimensions or text size, but what about when you need a whole group of images to be flexible as a whole? Let’s go over how to make two of the most common types of image collections—teaser thumbnail lists and image galleries—flexible too.

Teaser Thumbnail Lists

A teaser thumbnail list is my own personal name for the design convention of a list where each item is made up of a title, short description, and thumbnail image. Figure 2.22 is one example of a teaser thumbnail list, as is the list of featured pets on the home page of our fictional Beechwood Animal Shelter site (Figure 2.43). These types of lists can be built in many different ways, but many techniques result in lists that are not flexible or not as accessible to the end user as they could be.