Responsive Design: Patterns & Principles

“So many of the films made today are photographs of people talking.”

—ALFRED HITCHCOCK (http://bkaprt.com/rdpp/03-01/)

THERE’S BEEN A CONSIDERABLE AMOUNT of writing about how to produce images as flexible as our layouts. In fact, all it takes is a single line of CSS:

img {

  max-width: 100%;

}

First discovered by designer Richard Rutter, this single rule says that our images can render at whatever dimensions they want, as long as their width never exceeds the width of their containing element. In other words, every image’s max-width is now set to 100% of its container’s width (http://bkaprt.com/rdpp/03-02/). If that container gets smaller than ...