Image full width wrong height size in table cell

Question

I have made a table which has two rows and nine columns. The first row, I have combined cells and make it into three columns. I have set the full image width fit on each cell of the table. The first row has three pictures, and there is something weird here. The first image height size is always smaller than the others. In my case First Image height: 214.84px Second and Third: 216.56px

I thought the image size was affected by box-sizing: border-box style. I don't know why. Do you know why does it happen? Do you have any idea how to make those images have the same height without the specific height or background

Code below:

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

score 1 · Answer 1 · answered Jan 11 '19 at 10:39

1

You cant achive that with img tag, except that the image size is exactly as the size of box. Solution is using background-image. Here:

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

answered Jan 11 '19 at 10:39

Cuong Hoang

558
1
3
14

Well, thank you, but for some reason, I can't set the image as background. Second, you still need to define the width, height size for TD cell to display image as background – ToujouAya Jan 11 '19 at 10:45
U sure need to set width and height in all case. Whats wrong with background image ? U can totally use background image. Do u find your code look ugly with background image ? (No its not ugly first, and it solve problem last), Do u think background image will not support lazyload ? no ! u can do lazyload with background-img – Cuong Hoang Jan 11 '19 at 10:47
Not any reason you have mentioned above. The reason why I can't set the image as background because the table and the content inside generated by the third-party library and I don't want to make any change into it. I only want to know. Why does it happen? and How to do it with the only CSS – ToujouAya Jan 11 '19 at 11:01

score 1 · Answer 2 · answered Jan 11 '19 at 11:29

1

Force the table width using

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

(or another width you want)

answered Jan 11 '19 at 11:29

CribAd

452
6
19

Image full width wrong height size in table cell

2 Answers2