Pro CSS3 Animation

ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt

By sizing elements relative to their containers, you can smoothly “animate” the size of the elements as the
browser window is resized. Technically, this isn’t animation at all. At this stage, you’re simply sizing an image
dynamically by scaling it relative to its container (see Listing 8-1).

Listing 8-1. A Responsive Image

html { font-size: 62.5%; }
p { font-size: 1rem; }
.left { max-width: 100%; height: auto; float: left; margin-right: 2rem; margin-bottom: 1rem; }

As they resize the browser users will have the impression that the image (supplied by filtran, http://www.flickr.
com/photos/filtran/2978448269/) is being dynamically resized. The photograph will be displayed at its natural
size if the browser is set wide enough, but will scale to fit viewport widths that cannot contain its full dimension.
There are two possible drawbacks to this approach: depending on the initial native size of the image relative
to the body text, the image may appear out-of-scale at large or small screen widths. Alternatively, you can set the
image as a percentage of the width of its container, so that it scales down through the entire range of the viewport.
For example, let’s say that you’ve determined that a decent overall size for the paragraphs is 900 pixels wide, with
90 characters per measure (line of text). Given the presentational rule for the HTML and paragraphs, this means
that the width of the section element would equate to 90rem. The natural size of the image is 425 pixels wide. To
make the image completely scalable, you translate all of these values to percentages:

425 / 900 = 0.4722

This means that the image takes up 47.22% of the width of the paragraphs and translates to the CSS you
see in Listing 8-2.

Listing 8-2. An Alternate Responsive Image

section { max-width: 90rem; }
.left { width: 47.22%; height: auto; float: left; margin-right: 2.5%; margin-bottom: 2%; }

This combination of CSS declarations will create the appearance of the page shown in Figure 8-2.