How to remove a white line in the cell of my html table?

I am making a 5x5 table which will contain images, though on some of the squares I get a white line on the bottom of the cell. (note that I put a gold background so you could notice the line easier)

image of the problem https://i.sstatic.net/jpXDx.png

I have tried adding "vertical-align: bottom;" , cellpadding="0" cellspacing="0", but still the same problem.

css:

<style>
table {
  width: 90%;
}
td {
  width: 18%;
  position: relative;
border: 2px solid black;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
background-color: gold;
}
img {
  width: 100%;
display: block;
}
</style>

html:

<table align="center">
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
  </tr>
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
<tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
<tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
</table>

I expect to get rid of the lines in the cells.

Solution

If you add height: 100%; to your image css the gold area will be covered up.

I also added overflow: hidden; to the .content area to prevent the larger images from overlapping with the new 100% fix.

All changes have been labeled 'Below is new' in the css of the fiddle below.

table {
  width: 90%;
  /* Below is new */
  border-spacing: 2px;  
}

td {
  width: 18%;
  position: relative;
  border: 2px solid black;
}

td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
  /* Below is new */
  overflow: hidden;
}

img {
  width: 100%;
  display: block;
  /* Below is new */
  height: 100%;
}

<table align="center">
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
</table>