jquery - Set Height On a Container, After Re-sizing an Inner Element -

my website displays list of members.

each list item has photo, title (member's name) , small excerpt.

on large screens, list 1 row. on smaller screen, row collapse 3 columns , 2 columns (less 768px).

i want each item have equal height, each 'row' (on smaller devices) contains equal number of items.

this common task, write quick function called on $(window).load() , on $(window).resize().

the problem i'm having job, (i'm assuming) fact - before set height of member items, first set height of element within each member item. inner element photo, resize every time window resized. (i because photos must appear circles, need change each photo's height it's width changes).

i can't determine problem is, can see final height set on each member item short, , each items content overflows it's height. happens on resizing window, only, , work fine on initial page load.

this mark item (a member):

<div class="col-xs-6 col-sm-4 col-md-3">     <div class="member">         <div class="image">             <img src="path/to/file.jpg"/>         </div>         <div class="bottom">             <h3>john smith</h3>             <p>i code.</p>         </div>     </div> </div> 

here function (which called on window load , window resize):

function resizemembers(){      var highestmember = 0;      $('.member').each(function(i,e){          $(e).find('.image img').height($(e).find('.image .img').width());          if($(e).height() > highestmember){             highestmember = $(e).height();         }      });      $('.member').each(function(i,e){          $(e).height(highestmember);      }); } 

can tell me why final loop setting low-a height on each item? i'm guessing it's image's new height not being taken account?

i have way around problem.

whether or not constitutes answer, depend on reason searching when found question.

but, here alternative code in question:

function resizemembers(){     var highestmember = 0;      $('.member').each(function(i,e){      $(e).find('.image .img').height($(e).find('image .img').width());      if($(e).find('.bottom').height() > highestmember){         highestmember = $(e).find('.bottom').height();     }  });   $('.home-member-x').each(function(i,e){      the_height = highestmember + $(e).find('.image').width();      $(e).height(the_height);  }); 

}

another suitable answer, finds page, @darrylyeo pointed out - make original images squares (and set height auto images).