2

我制作了一个有两行九列的表格。第一行，我将单元格组合成三列。我已经在表格的每个单元格上设置了完整的图像宽度。第一行有三张图片，这里有些奇怪。第一个图像高度尺寸总是小于其他的。在我的情况下，第一个图像高度：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>

代码笔

4

2 回答 2

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>

于 2019-01-11T10:39:53.320 回答
1

使用强制表格宽度

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

（或您想要的其他宽度）

于 2019-01-11T11:29:00.023 回答