9

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?

fefe
  • 8,755
  • 27
  • 104
  • 180

3 Answers3

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);
});
vijayP
  • 11,432
  • 5
  • 25
  • 40
  • no. Image Corners per row should touch corners and cycle2 items per row should have same height to avoid situations, what your example illustrates as well in the second row – fefe Sep 07 '15 at 11:04
  • but in that case I guess we will have to find smallest image height and will have to apply it to others so that we don't get any white spaces between rows..am I correct? Or still I am far away from your requirement? – vijayP Sep 07 '15 at 11:12
  • 1
    Yes that would be the idea I think, to find the smallest image in each rows cycle and a workaround to avoid white spaces on row rotation – fefe Sep 07 '15 at 11:14
0

Very difficult to follow your question, but if I understand you correctly, you're looking to set a series of columns as the same height as the highest column's height. You haven't posted any code, or told us which framework you're working with (maybe Bootstrap because the tag?), so it's very difficult to provide an accurate answer.

Use jQuery to get the height of each column you want to compare, saving the heights in an array, compare the heights to find highest, then set height of all columns to that height. You will have whitespace in your design though, but that is how to do it.

toad
  • 400
  • 2
  • 13
0

I'm not sure if I understood your problem correctly, but if you are looking for a solution to horizontally align columns within a row, or to normalize heights of columns within a row, then you should take look at this awesome jQuery script:

http://brm.io/jquery-match-height/

We are using it in a dozen projects when trying to horizontally align an unknown number of "div.col-*" of unknown height within a "div.row". Our common approach looks somethin like this

<div class="row normalizeMe">
    <div class="col-sm-6 col-md-4">unknown height...</div>
    <div class="col-sm-6 col-md-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
</div>
<script>
    $('.row.normalizeMe > div[class*="col-"]').matchHeight();
</script>

No matter which screen size or how large the boxes are, the script will always nicely align your col-- horizontally. It should also work to normalize the height of the container of your slides.

Hudri
  • 188
  • 3
  • 18