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

（或您想要的其他宽度）

表格单元格中的图像全宽错误高度尺寸

2 个答案: