How to make image size relative to parent using CSS?

To resize small images, putting them in small container and pushing that small container with another element is a clean solution. In my opinion tables are great for that.

Here is the code;

<div class="col col-span-1" style="position : relative">
  <div>
    <img style="max-width:800px; max-height:800px;width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png">
  </div>
  <table style="position: absolute;top: 75%;width: 85%;">
    <tbody>
      <tr>
        <td style=" width: 60%;"></td>
        <td style=" max-width: 90px; width: 39%;">
          <div style="">
            <img src="https://i.imgur.com/C1uxk6Y.png" style="width:100%; height: 100%;">
          </div>
        </td>
      </tr>
    </tbody>
  </table>    
</div>