Cycle2 slides in twitter-bootstrap grids

Question

I have some grids like

row 4 | 4| 4
row 8    | 4

than I place in first row first and second grid each a cycle2 slider than on seconds rows second grid again a cycle2 It's a kind of playing with symmetry

My Problem Images they have different resolution and the height should expand to the highest grid. So for example in my first row the height of cycle2 images should be the same.

here I have a jsfiddler mockup
https://jsfiddle.net/lgtsfiddler/72ycx3m6/19/

How to proceed in this case?

Answer 1

Are you looking for output like this:

https://jsfiddle.net/72ycx3m6/24/

Here I have added a equalheight class to each row div and also added JS function like:

$(document).ready(function(){
    var maxHeight = 0;
    $(".img-responsive").each(function(){
         var currentHeight = $(this).height();
         if (currentHeight > maxHeight)
             maxHeight = currentHeight;
    });

    $("div.equalheight").height(maxHeight);
});