Maintaining Image Hierarchy And Aspect Ratio In Responsive Design

Posted: 30 Jul 2012 05:30 AM PDT

For the last few weeks we’ve been talking about images in the context of responsive design. We looked at how to serve different images to different devices and then a couple of potential ways to replace bitmap images with icon fonts and SVG.

While collecting resources for those posts I came across a few more image related issues and thought I’d combine them in a single post and present them here.

2 images, with larger horizontal image larger and more important in the hierarchy, than the small vertical image

Maintaining Image Hierarchy

The first step in having your images be flexible is to set max-width to 100% and let the height of the image adjust. This maintains the aspect ratio of the image, but there’s a got’cha that’s not immediately obvious. Andy Clarke pointed this out in his post about maintaining image hierarchy.

But because of this banner image's wider aspect ratio, when it's squeezed down to fit a narrow column it loses its position in the visual hierarchy of the page. In fact, the normally smaller inline images appear larger, inverting the visual hierarchy.

Because adaptability is based on width, horizontal images need to scale more than vertical images. The problem this can create is the scale between images can change. A horizontal image that’s larger and more dominant in the hierarchy on a wide screen browser, could end up being the smaller and less dominant image on the narrow screen of a mobile device.

Check Andy’s post for a good example where this happens on a site and also an example where the hierarchy is preserved.

Depending on your design and the images this may or may not be an issue, but typically hierarchy is something you’d want to remain consistent across devices. It’s something you’ll have to decide on a case by case basis.

Andy’s solution involves some css and some thought about what’s the important part of the image. First add overflow: hidden to the image’s container.

1  2  3  4  5

figure {   overflow: hidden  }

Next you want to reset the image’s width and height to their native dimensions (here 800px and 400px respectively) and use margins to determine what part of the image should show.

1  2  3  4  5  6  7  8  9  10  11

figure:first-of-type img {    margin : 0 -50%;    width : 800px;    max-width : 800px;    height : 400px;  }

Keep in mind that replacing the image using techniques I discussed a few weeks ago is another solution to this same problem. Sometimes though it’s not practical to create new images and in those cases the above might work well for you.

Controlling Aspect Ratio with object-fit

In the future the css3 property object-fit may provide even more control to the above hierarchy problem. At the moment there’s little if any browser support.

The previous link discusses object-fit in the context of a different problem, but the basic idea is similar to Andy’s solution above in that you crop the image to fit the container. The difference is you’d have more control over how that happens.

Object-fit will have the following values.

contain — The element is resized to fully display in its container while maintaining its aspect ratio. The image is letterboxed where necessary.
fill — The element fills it’s container completely. It will stretch and break aspect ratio if necessary.
cover — The smaller of the width or height of the element is made to fit and the other dimension is then cropped.
none — Does nothing. Uses the intrinsic dimensions of the element.

If the above seems familiar it’s because object-fit works similar to the css background-size property, except that it works on inline and block level images instead of background images.

There’s also a corresponding object-position property that works the same as the background-position property, which allows you to set a distance from the top, right, left, and bottom of the container.

Making Image Maps Responsive

I’m not sure the last time you created an image map. It’s been awhile since I’ve created one. Still from time to time you or a client may want to include one on a page.

Image map coordinates are set in absolute measurements. which makes them hard to use when your image is changing size. Matt Stow created a jQuery plugin that will recalculate coordinates as the image resizes. You can see a demo here and the demo links to the code on GitHub.

Keeping Images on a Baseline Grid

When it comes to keeping images on a baseline grid there are a couple of things you can do. One is to make sure your image heights are always a multiple of your baseline unit. That’s not always practical, especially with a responsive design where the height of your images will change.

The other solution is to set margins on the image so that anything that follows it falls back on the baseline. Easy enough when you know the height of the image, but not so easy when that height is changing. Fortunately Matthew Wilcox has a jQuery solution that will dynamically calculate the image height and adjust the margin.

Another solution to the baseline issue is to keep your image height fixed and then crop the image to fit. The method is similar to Andy’s solution above.

Making Embedded Videos Fluid

When you’re directly embedding a video on a web page, you can apply a max-width of 100% like you would for images and have flexible videos. Unfortunately many of us aren’t embedding videos directly, but rather grabbing code from sites like YouTube and Vimeo. The videos load inside an iframe or use legacy embed and object code.

These videos usually have a fixed width applied to them, which breaks our flexible max-width css.

Chris Coyier has a great post on Net Magazine walking through the issue along with solutions based on which service is supplying the code.

At times the solution may need a Javascript solution and once again Chris comes to the rescue as he and the team at Paravel developed a jQuery plugin FitVids.js to help give fluidity to your embedded videos.

Dave Rupert from Paravel also has a solution similar to how FitVids works (the padded box) for dealing with images alone.

At equal widths the two images have now reversed importance in the hierarchy

Summary

You may not run into all the issues described above often, but more than likely you’ll encounter them at times. The solution of cropping an image depending on the device comes up often enough in different contexts that it’s something to pay attention to. Making videos fluid is another.

You may or may not run into image maps and baseline grid issues as much, though you may certainly have to deal with them from time to time as well. I don’t use a lot of image maps myself, but I do like to use baseline grids.

Believe it or not there’s still more that could be said about images where responsive design is concerned. For example I’ve barely scratched the surface of everything being written about retina displays and how we should create images for them.

I’ll save those for another time though. Next week I want to move past images and dig a little deeper into media queries and breakpoints.

The post Maintaining Image Hierarchy And Aspect Ratio In Responsive Design appeared first on Vanseo Design.