html - 使 HTML 表格行对齐表格单元格中最大图像的高度

Question

在这个 fiddle 中:http://jsfiddle.net/tvqdrwp9/3/

我希望图像(可以是任何大小)拉伸(stretch)所有相邻表格单元格的高度以匹配。只有 2 行，每行 2 个单元格。一个单元格包含图像，另一个单元格包含文本。我希望文本单元格与相邻图像的高度相匹配。我有 overflow:hidden 在单元格上，所以图像水平溢出不是问题。

框 2 和 3 中的文本应在中间垂直对齐，行应由框(单元格)1 和 4 中的图像高度决定。

我不明白为什么我仍然在每张图片的底部看到一条红线。

.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

您可以在图像上使用 display: block 或 vertical-align: middle 来校正它的对齐方式。

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

或者..

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

两者都有效。