Kevin W. Tharp

Eagle

The Fluid Grid: Fluid Images page 1

In the previous lessons we have successfully developed a fluid website, almost. We are still left with those images that are staying their native size dispite the size of the viewport. In this page we will address how to make images fluid so they can grow and shrink with the viewport.

In the image below, the image is bigger than the size of the container, notice how it bleeds out of the area whereas the text is confined. When the viewport is reduced, the aside section to the right collapses and lies over the image.

Eagle targeting you for dinner

Lets fix that so it is a fluid image in:

The Fluid Grid: Fluid Images page 2