表格单元格中的图像全宽错误高度大小

Question

我制作了一张有两行九列的表格。第一行，我将单元格组合成三列。我已经在表格的每个单元格上设置了完整的图像宽度。第一行有三张图片，这里有些奇怪。第一个图像高度尺寸总是小于其他的。 就我而言 第一张图片高度：214.84px 第二和第三：216.56px

我认为图像大小受box-sizing: border-box 样式的影响。我不知道为什么。你知道为什么会这样吗？你知道如何让这些图像在没有特定高度或背景的情况下具有相同的高度

代码如下：

img {
  display
  max-width:100%;
  height: auto;
  width:100%;
}

<div class="container">
  <div class="row">
    <table>
      <tbody>
        <tr class="row-1">
          <td colspan="3" class="column-1"><img src="https://blog.dev.whiplashapi.com/wp-content/uploads/2019/01/Social_IoR_slider.png" alt=""  class="alignnone size-medium wp-image-141"></td>
          <td colspan="3" class="column-4"><img src="https://blog.dev.whiplashapi.com/wp-content/uploads/2019/01/Social_IoR_slider.png" alt=""  class="alignnone size-medium wp-image-141"></td>
          <td colspan="3" class="column-7"><img src="https://blog.dev.whiplashapi.com/wp-content/uploads/2019/01/Social_IoR_slider.png" alt="" width="300" class="alignnone size-medium wp-image-141"></td>
        </tr>
        <tr class="row-2">
          <td class="column-1"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-2"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-3"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-4"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-5"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-6"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-7"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-8"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
          <td class="column-9"><img src="https://www.wwechampionsgame.com/uploads/9/8/3/9/98393494/book-ior-2_orig.png" alt="" width="229" height="300" class="alignnone size-medium wp-image-140"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Code Pen

Answer 1

你不能用 img 标签来实现，除了图像大小与盒子的大小完全相同。解决方案是使用背景图像。这里：

<div class="container">
  <div class="row">
    <table>
      <tbody>
        <tr class="row-1">
          <td colspan="3" class="column-1" style="background-image: url(https://blog.dev.whiplashapi.com/wp-content/uploads/2019/01/Social_IoR_slider.png); background-size: cover; background-position: center center;"></td>

        </tr>
        <tr class="row-2">
          <td colspan="3" class="column-1" style="background-image: url(https://blog.dev.whiplashapi.com/wp-content/uploads/2019/01/Social_IoR_slider.png); background-size: cover; background-position: center center;"></td>

        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

使用强制表格宽度

table{
  table-layout:fixed;
  width:900px;
}

（或您想要的其他宽度）