Как установить все DIV на одну и ту же высоту для всех DIV в одной строке таблицы?

Question

У меня есть таблица html с тремя столбцами. Каждая ячейка таблицы содержит DIV с различным контентом, и одна из них содержит изображение. У меня есть небольшая функция JS, которая устанавливает высоту контейнеров изображений DIV на одну из двух возможных высот.

Image естественный рост < 60px == контейнерной DIV 60 точек высокого

Image естественный рост> 60px = контейнер DIV 104 точек с высоким

Теперь нужно выяснить, как установить все три image DIVs на одну и ту же высоту в каждой строке таблицы.

Строка с маленькими изображениями = все три изображения DIV должны быть установлены на 60 пикселей.

Строка с одним или несколькими большими изображениями = все три изображения DIV должны быть установлены на 104 пикселей.

Это мой JS фрагмент кода:

$('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

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

Моя JQuery функция/JS только устанавливает текущий DIV изображения на 60 или 104 пикселей, так что эти контейнеры DIVs могут иметь разные высоты на каждом ряду. Но, как я писал выше, мне нужно установить одинаковое значение для всех трех контейнеров изображений в каждой строке. В примере HTML, прежде всего, DIV должны иметь длину в 104 пика, поскольку одно из изображений превышает 60 пикселей. Как я могу изменить свой фрагмент кода, чтобы делать то, что хочу?

EDITED: Я не могу использовать высоту 100% для DIV с классом .givarbild, потому что я также хочу, чтобы изображения были вертикально центрированы в DIVs в каждой строке. Вертикальное центрирование получаются с этим CSS (для того, чтобы использовать 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; 
} 

Я смотрел на Flexbox, но это кажется немного сверху для выполнения этой задачи я буду расследуйте дальше, хотя, спасибо за предложение.

Answer 1

Идет так же, как вы уже собираетесь ... в html вы можете установить высоту каждого div на 100%. Еще лучше установите класс givarbild, чтобы иметь высотой 100%, что будет определять размер ячейки, в которой они содержатся. Ячейки будут авторизоваться до размера самого большого изображения, поэтому все они будут одинаковой высоты.