0

Is there any way to make one thumbnail the same height as another thumbnail?

<div class="row">
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h5>Lorem ipsum dolor sit amet</h5>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>  
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h1>how to</h1>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h5>Lorem ipsum dolor sit amet, consectetur </h5>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>
           </div>

The result of this code is, the second thumbnail height is taller than the first and the <a href > height between 1 to another is different

like this https://jsfiddle.net/hbfu2b97/1/

If you make the result screen bigger u can see the difference.

KAD
  • 10,972
  • 4
  • 31
  • 73
vicario
  • 233
  • 1
  • 6
  • 18

1 Answers1

1

You need to create a javscript function that runs onload, catches all the thumbnails, checks which one has the highest height and then loops over the thumbnails to assign them the obtained height:

@fcalderan has a good solution in his answer: https://stackoverflow.com/a/9279339/2611451

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

I have updated your fiddle: https://jsfiddle.net/hbfu2b97/6/

UPDATE

To make the recipe link aligned to the bottom I have set the thumbnail as relative positioned and made the recipe link elements position absolute and align to buttom:

.thumbnail
{
  position:relative
}

.caption a
{
  position:absolute;
  bottom:1px
}
Community
  • 1
  • 1
KAD
  • 10,972
  • 4
  • 31
  • 73
  • sirrr, but the link recipe not at the same heightt – vicario Mar 12 '16 at 11:05
  • sir, can i ask you what jscript for adaptable font size depends on charachter length. i ask in http://stackoverflow.com/questions/35949631/how-to-make-fontsize-adapt-to-character-length?noredirect=1#comment59559900_35949631 but no one answer – vicario Mar 12 '16 at 11:21
  • That's a good question, but this needs some kind of algorithm to get applied using javascript in order to consider all the cases. – KAD Mar 12 '16 at 11:34
  • how to do that sir. i dont understand anything about algoritm sir. – vicario Mar 12 '16 at 12:09