使HTML表格行按表格单元格中最大图像的高度调整。

Question

在这把小提琴里：http://jsfiddle.net/tvqdrwp9/3/

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

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

两样都有用。