Responsive images – vertical images resize differently than horizontal images

[daltonrooney]

I’ve come across this problem quite a bit when working with responsive images and I wonder if there’s a solution out there anywhere. Vertically oriented images resize differently than horizontally oriented images, based on the width of the screen. The result is that vertical images are often too tall relative to horizontal images on the page.

As a practical example, say I’ve got a gallery of images of mixed aspect ratios – some landscape and some portrait, and the whole thing is based on a flexible grid. Here’s a screenshot, so far so good: http://cl.ly/0v1K3R3o0c0z2z092L2O

Now, when I resize the page horizontally, each cell resizes and the images inside resize according to the width of the parent. This is perfect for landscape images, but the portrait images are taller than they are wide and therefore don’t resize at the same time. Now everything is out of whack: http://cl.ly/0K0g0B1b0O430j132R1N

How does one get the vertical images to resize proportionally in conjunction with the horizontal images? I can share a link if anyone wants to see this in action.

Cheers,
Dalton

[daltonrooney]

Here’s a link to an active example, if anyone is interested: http://test.folio.fm/galleries/cezanne/

[daltonrooney]

OK, I’ve solved this for now with a little bit of javascript. Find the width of the parent div for each image, then set the max-height of the images to match. It’s a little wobbly (resizing is not perfectly smooth) but it works.

Demo: http://test.folio.fm/galleries/cezanne/
Relevant code:

function adaptiveResize() {

var $w, $target;

$target = $('img');

$target.each(function() {

$w = $(this).parent().width();

$target.css('max-height', $w );

});

}



$(window).load(function() {

adaptiveResize();

});



$(window).resize(function() {

adaptiveResize();

});

Any better solutions out there?

[tobeeornot]

Not sure if this article helps:
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

[outline4]

Hi daltonrooney.

Did you ever find a better solution?
Maybe in CSS?

Cheers
Stefan

[rafaeljuarez]

the best solution to a grid like that, when images are different height is using columns, not tables, not floats not inline block, like this:

http://www.proyecto-internet.com/c
or this http://www.raulsierra.co

it looks much much better and its super easy to achieve.

[Shikkediel]

https://api.jquery.com/load-event/

$(window).load(function() {

I think an important chapter is missing – matching the aspect ratio of the screen with that of the image in order to render it as large as possible.

Also don’t get why you’d use capitals on some of the CSS properties…

Ironically, there’s some validation errors for the images.

[Author]

Posts