すべてのDIVを同じテーブル行のすべてのDIVと同じ高さに設定するにはどうすればよいですか？

Question

私は3つの列を持つhtmlテーブルを持っています。各表のセルには異なる内容のDIVが含まれ、そのうちの1つに画像が含まれています。私は2つの可能な高さの1つに画像のDIV容器の高さを設定する小さなJS機能があります。

画像自然の高さ< 60PXが== 60ピクセルの高

画像自然の高さは> 60PX =コンテナDIVが

高104ピクセルコンテナDIVですされ​​ている今、私はすべての3つを設定する方法を把握する必要があり画像DIVは、各テーブル行で同じ高さになります。

小さな画像のみの行= 3つの画像のDIVはすべて60pxに設定する必要があります。

1つ以上の大きな画像の行= 3つの画像のDIVはすべて104ピクセルに設定する必要があります。

これは私のjsの抜粋です。これらのコンテナdiv要素が異なる持つことができるように

<tr> 
    <td> 
     <div class="givarbild""> 
      <img width="100" height="50" src="image path"> 
     </div> 
    </td> 
    <td> 
     <div class="givarbild""> 
      <img width="150" height="50" src="image path"> 
     </div> 
    </td> 
    <td> 
     <div class="givarbild""> 
      <img width="90" height="90" src="image path"> 
     </div> 
    </td> 
</tr> 

$('div.givarbild img').each(function() { 
     var container = $(this).closest('div.givarbild'); 
     $("<img>").attr("src", $(this).attr("src")).load(function(){ 
      var picHeight = this.height; 
      console.log(picHeight); 
      if(picHeight < 60){ 
       container.height(60); 
      }else{ 
       container.height(104); 
      } 
     }); 
    }); 

HTMLは、私のjqueryの/ JS機能は、60または104ピクセルに現在の画像DIVを設定し、各列の高さ。しかし、上記のように、各行の3つのイメージコンテナすべてに同じ値を設定する必要があります。 上記のHTML例では、画像のいずれかが60ピクセルを超えているため、すべてのDIVは高さ104ピクセルにする必要があります。私の欲しいことをするために私のコードスニペットを変更するには？

EDITED： クラス.givarbildでDIVの高さを100％使用することはできません。画像を各行のDIVの中央に配置したいからです。垂直方向のセンタリングは、このCSSで得られた（コンテナはPX値に設定する必要がありますmax-height: 100%を使用するために：

div.givarbild { 
    height:100px; /*this value is overridden by my JS*/ 
    min-width:190px; 
    position: relative; 
    margin:10px 0px; 
} 

.givarbild img { 
    max-height: 100%; 
    width:auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto 0; 
} 

私はフレキシボックスを見て、それは少し、このタスクのためのトップの上にいるようだ私はだろうか？さらにお手数ですが、アドバイスをいただきありがとうございます。

Answer 1

htmlには、それぞれのdivの高さを100％に設定することができますが、givarbildクラスをheightプロパティを100％に設定すると、セルのサイズに合わせてサイズが変更されます。セルは最大サイズのイメージに自動的にサイズ変更されるため、すべて同じ高さになります。