Полная ширина изображения неправильный размер высоты в ячейке таблицы

Question

Я сделал таблицу, которая имеет две строки и девять столбцов. В первом ряду я объединил ячейки и разбил его на три колонки. Я установил полную ширину изображения, подходящую для каждой ячейки таблицы. В первом ряду три картины, и здесь есть что-то странное. Первый размер высоты изображения всегда меньше, чем остальные. В моем случае Высота первого изображения: 214,84 пикселей Второй и третий: 216,56 пикселей

Я думал, что размер изображения зависит от стиля 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>

Код Pen

Answer 1

Форсировать ширину стола, используя

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

(или другой желаемой ширины)

Answer 2

Вы не можете достичь этого с тегом 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>