The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more.
Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works.
Meet Focal Point
Focal Point is a GitHub project and CSS framework created by Adam Bradley. As you know, the concept of responsive images requires that any images on your page resize and reflow to achieve optimal layout for the current viewport size. Focal Point takes this idea a step further though and not only resizes your images, but crops them as well.
The problem with this idea of course is that if you arbitrarily crop an image, you could be cutting out the most important part of the image! For instance, in the image above, the subject is on the right side of the image. How do we prevent her from being