Wie alle DIVs auf alle DIVs in derselben Tabellenzeile auf die gleiche Höhe gesetzt werden?

Question

Ich habe eine HTML-Tabelle mit drei Spalten. Jede Tabellenzelle enthält DIVs mit unterschiedlichem Inhalt und einer davon enthält ein Bild. Ich habe eine kleine JS-Funktion, die die Höhe der Bilder DIV-Container auf eine von 2 möglichen Höhen setzt.

Bild natürliche Höhe ist < 60px == Container DIV ist 60 px hoch

Bild natürliche Höhe> 60px = Container DIV ist 104 px hoch

Jetzt muss ich herausfinden, wie alle drei gesetzt Bild DIVs auf jeder Zeile in der gleichen Höhe.

Reihe mit nur kleinen Bildern = alles drei Bilder DIVs sollte 60px eingestellt wird.

Reihe mit einem oder mehreren großen Bildern = alle drei Bild DIVs sollte 104px eingestellt werden.

Das ist mein js Snippet:

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

Meine jquery/JS-Funktion setzt nur das aktuelle Bild DIV auf 60 oder 104 Pixel, so dass diese Behälter DIVs anders haben können Höhen in jeder Reihe. Aber wie oben beschrieben, muss ich für alle drei Bildcontainer in jeder Zeile den gleichen Wert einstellen. Im obigen HTML-Beispiel sollten alle DIVs 104 px hoch sein, da eines der Bilder über 60px groß ist. Wie kann ich mein Code-Snippet ändern, um das zu tun, was ich möchte?

EDITED: Ich kann nicht 100% Höhe für das DIV mit der Klasse .givarbild verwenden, weil ich auch möchte, dass die Bilder vertikal in den DIVs in jeder Zeile zentriert sind. Die vertikale Zentrierung mit diesem CSS erhalten wird (in der Reihenfolge max-height: 100% die Behälter zu verwenden, muss auf einen Pixel-Wert eingestellt werden:

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

ich Flexbox sah, aber es scheint ein wenig übertrieben für diese Aufgabe werde ich forschen Sie jedoch weiter, danke für den Vorschlag.

Answer 1

Gehen Sie die gleiche Weise, die Sie bereits gehen ... im HTML können Sie die Höhe jedes div zu 100% einstellen. Besser noch, stellen Sie die Klasse givarbild ein height -Eigenschaft von 100% .Das wird sie auf die Größe der Zelle, in der sie enthalten sind. Die Zellen werden automatisch auf die Größe des größten Bildes, so dass alle von ihnen die gleiche Höhe sein werden.