内側の要素のサイズを変更した後のコンテナの高さの設定

Question

私のウェブサイトにはメンバーのリストが表示されます。

各リストの項目には、写真、タイトル（メンバーの名前）、小さな抜粋があります。

大きな画面では、リストは1行に過ぎません。小さな画面では、行は3列に、最後には2列（768px未満）に縮小されます。

各アイテムの高さを同じにして、各デバイスの「行」に同数のアイテムが含まれるようにします。

これは一般的な作業ですが、私は$（window）.load（）と$（window）.resize（）で呼び出される簡単な関数を記述します。

私がこの仕事に抱えている問題は、すべてのメンバ項目の高さを設定する前に、まず各メンバ項目内の要素の高さを設定するということです。この内部要素は写真です。ウィンドウのサイズを変更するたびにサイズを変更します。 （写真は円として表示されるので、これを行うので、幅の変更に応じて各写真の高さを変更する必要があります）。

問題の内容を正確に判断することはできませんが、各メンバーアイテムに設定されている最終的な高さが短すぎて、各アイテムのコンテンツの高さがオーバーフローしていることがわかります。これは、ウィンドウのサイズ変更時にのみ発生し、最初のページの読み込みで正常に動作します。

これは、項目（メンバー）のためのマークアップである：ここでは

<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 like to code.</p> 
     </div> 
    </div> 
</div> 

は、（窓の負荷とウィンドウサイズ変更で呼び出される）関数です：

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); 

    }); 
} 

誰も教えてもらえます私はなぜ最終ループが低すぎるか、各項目の高さを設定していますか？私はそれが画像の新しい高さが考慮されていないこととは何かを推測しています。

Answer 1

問題を回避する方法があります。

これが回答として構成されているかどうかは、この質問が見つかったときに検索した理由が何であるかによって異なります。

しかし、ここでは私の質問のコードに代わるものです：

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); 

}); 

}

別の適切な答え@darrylyeoが指摘したように、このページを見つけた誰かのために、である - すべて確認します元の画像の四角形（および画像の高さをautoに設定）