Remaking fixed grid to a responsive grid

Question

I have implemented this fixed grid: http://jsfiddle.net/challenger/UxzCa/1 . There are two requirements:

• images should fit into a square card div (width/height can be different);
• card dimensions shouldn't be fixed.

As for dimensions it is possible to implement using jquery and recalculate widths/heights on window.resize event. Are there alternative ways?

Answer 1

I have a partial solution that takes care of the image aspect-ratio issue and the fixed-width issue.

For the fixed-width of the grid, set the width: auto and this will allow the floats to wrap to as many lines as required:

.grid-row {
    width: auto;
    margin: 0 auto;
}

The images need to scale with height if they are portrait (height/width > 1) or width if they are landscape (height/width < 1).

Define the following classes:

.table-cell img.portrait {
    height: 100%;
}
.table-cell img.landscape {
    width: 100%;
}

and then use the following jQuery method to set the correct class based on the aspect ration of each image:

$('.table-cell').each(function(){
    var image = $(this).find('img');
    aspectRatio = image.height()/image.width();
    if (aspectRatio > 1) 
    {
        image.addClass('portrait');
    }
    else
    {
        image.addClass('landscape');
    }
});

See Demo Fiddle

Footnote

It may be possible to make the .card elements responsive and maintain their aspect ratio using some CSS techniques similar to the ones presented in the following question:

How do you vertically center absolute positioned text w/o declaring container size and w/o JS?