Make HTML table-row snap to height of largest image in table-cell

Question

In this fiddle: http://jsfiddle.net/tvqdrwp9/3/

I want the images (which could be any size), to stretch the height of all the adjacent table-cells to match. There will only be 2 rows, with 2 cells each. One cell contains an image, the other text. I want the text cells to match the height of the adjacent image. I have overflow:hidden on the cells, so image overflowing horizontally is not an issue.

The text in boxes 2 and 3 should be vertically aligned in the middle, and the rows should be dictated by the heights of the images in boxes (cells) 1 and 4.

I can't understand why I am still getting a red line at the bottom of each image.

 .about-boxes { display: table; max-width: 600px; } .about-box-row { display: table-row; height: 100%; } .about-box { display: table-cell; vertical-align: middle; width: 50%; overflow: hidden; } .about-box img { width: auto; height: 100%; } .about-box-1, .about-box-4 { background: red; } .about-box-2, .about-box-3 { background: #CCC; color: #000; } 

 <div class="about-boxes"> <div class="about-box-row"> <div class="about-box about-box-1"> <img src="http://dummyimage.com/300x180/000/fff"> </div> <div class="about-box about-box-2"> <h2>Text</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis velit repellat voluptate eum est re- iciendis eius recusandae molestiae iusto, dolor quis- quam voluptas.</p> </div> </div> <div class="about-box-row"> <div class="about-box about-box-3"> <h2>Text</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisic- ing elit. Perspiciatis velit repellat voluptate eum est reiciendis eius recusandae molestiae iusto, dolor quisquam voluptas.</p> </div> <div class="about-box about-box-4"> <img src="http://dummyimage.com/320x360/000/fff"> </div> </div> </div> 

Answer 1

You can either use display: block or vertical-align: middle on the image to correct the alignment of it.

.about-box img {
  width: auto;
  height: 100%;
  display: block;
}

Or..

.about-box img {
  width: auto;
  height: 100%;
  vertical-align: middle;
}

Both work.