HTML - How to make an image fill table cells of various sizes

Question

I am making a website for a school project and have implemented a table that contains images which are supposed to resize to completely fill each table cell. This works as intended for most cases, however, when a table cell has a rowspan > 1 the image does not resize as intended. This problem does not occur for colspan > 1. Any help would be appreciated.

The relevant code can be found below:

th {
  width: 200px;
  height: 200px;
  padding: 0;
}

.grid_img {
  width: 100%;
  height: 100%;
  display: table-header-group;
}

<table cellspacing="30">
  <tr>
    <th class="box"><img id="img_01" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_1.jpg"></th>
    <th rowspan="2"><img id="img_02" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_2.jpg"></th>
    <th class="box"><img id="img_03" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_3.jpg"></th>
    <th class="box"><img id="img_04" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_4.jpg"></th>
    <th class="box"><img id="img_05" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_5.jpg"></th>
  </tr>
  <tr>
    <th class="box"><img id="img_06" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_6.jpg"></th>
    <th class="long_box" colspan="2"><img id="img_07" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_7.jpg"></th>
    <th class="box"><img id="img_08" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_8.jpg"></th>
  </tr>
  <tr>
    <th class="long_box" colspan="2"><img id="img_09" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_9.jpg"></th>
    <th class="box"><img id="img_10" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_10.jpg"></th>
    <th class="long_box" colspan="2"><img id="img_11" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_11.jpg"></th>
  </tr>
</table>

Answer 1

try this

set image as background of your th tag

th {
  min-width: 200px;
  width: 200px;
  height: 200px;
  padding: 0;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

<table cellspacing="30">
  <tr>
    <th class="box" id="img_01" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_1.jpg)"></th>
    <th rowspan="2" id="img_02" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_2.jpg)"></th>
    <th class="box" id="img_03" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_3.jpg)"></th>
    <th class="box" id="img_04" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_4.jpg)"></th>
    <th class="box" id="img_05" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_5.jpg)"></th>
  </tr>
  <tr>
    <th class="box" id="img_06" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_6.jpg)"></th>
    <th class="long_box" colspan="2" id="img_07" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_7.jpg)"></th>
    <th class="box" id="img_08" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_8.jpg)"></th>
  </tr>
  <tr>
    <th class="long_box" colspan="2" id="img_09" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_9.jpg)"></th>
    <th class="box" id="img_10" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_10.jpg)"></th>
    <th class="long_box" colspan="2" id="img_11" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_11.jpg)"></th>
  </tr>
</table>