Scale a floating table with a background image keeping 1:1 ratio - html

Question

I am trying to scale a table cell that has a background image for an email I'm developing. However, I'm having trouble making the height dynamic on the mobile version.
The table cell:
Has no content over the background image
Stacks on mobile
Needs to show the image in a 1:1 ratio, with none of the image cut off at the top or the sides
Is full width on mobile
Fiddle
The fiddle will make the issue clear when you resize your browser window - The cell stacks fine and the width is fine, it's the height that's the problem. The height of the cell is too low, cutting off some of the image.
I need the height to firstly be exactly 385px x 256px on desktop (the exact size of the image), then 100% width on mobile, while also having a full image height on mobile.
There are reasons behind this approach which are not worth boring you with here.
The code:
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<table width="215" height="256" border="0" cellspacing="0" cellpadding="0" style="float:left;" align="left" class="100p" bgcolor="#eeeeee">
<tr>
<td width="215" style="float:left;" align="left" class="displayproperlyplease 100nopad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
<tr>
<td align="center">
TEXT
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<table width="385" border="0" cellspacing="0" cellpadding="0" class="100p" style="float:left;display:inline" align="right">
<tr>
<td width="20" ></td>
<td background="http://msgfocus.com/files/amf_to_infinity/workspace_83/2-years.jpg" style="background-position:left; background-size:cover; float:left;" bgcolor="#0c0807" width="385" class="100nopad" valign="right" align="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
<tr>
<td align="center">
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
CSS
#media (max-width:630px) {
*[class="100p"] {width:100% !important; height:auto !important; text-align:center !important;}
*[class="100pad"] {width:95% !important;}
*[class="100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
*[class="displayproperlyplease 100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
table[class="wrapper"] {width: 100%;}
table[class="wrapper"] .fl {width: 100% !important;float: left;height: auto;}
}
How can I make the background image on mobile be 100% width, but have the height increase/reduce to ensure none of the image is cut off?