If you've spent any time at all playing with responsive images (or adaptive images) you've probably noticed something about small screens – portrait-oriented images take on a much greater importance. The simple fact is that on the vertically-oriented small screen, taller images are larger and, thus, assume a greater importance.
As developer Dave Rupert puts it: Image Height == Image Importance.
The problem with that equation is that it often means that on mobile screens less important images suddenly steal the spotlight. Take an image with thumbnails below it for example. As Rupert recently found, when scaling down your designs, sometimes the image importance equation means the emphasis is wrong on small screens:
The solution for Rupert is what he calls, "Uncle Dave’s Squeeze n' Crop Method," which consists of a wrapper div and some very clever CSS combined with @media rules. Head on over to Rupert's blog for the full solution and a little explanation of why it works. It's not exactly cut-and-paste code you can just drop in your own projects since image dimensions and ratios will vary, but it's definitely worth bookmarking should the problem arise in your own work.
