Html 以1:1的比例缩放背景图像的浮动表

我正在尝试缩放一个表格单元格，它有我正在开发的电子邮件的背景图像。但是，我在移动版上无法使高度动态变化

表格单元格：

• 在背景图像上没有内容
• 手机上的堆栈
• 需要以1:1的比例显示图像，在顶部或侧面都不剪切图像
• 在手机上是全宽的吗

当你调整浏览器窗口的大小时，小提琴会把问题弄清楚——单元格堆叠得很好，宽度也很好，问题出在高度上。单元格的高度太低，会切断部分图像

我需要的高度，首先是准确的385px x 256px的桌面（图像的确切大小），然后100%的移动宽度，同时也有一个完整的移动图像高度

这种方法背后有一些不值得在这里让你厌烦的原因

守则：

HTML

---

如何使手机上的背景图像具有100%的宽度，但增加/减少高度以确保图像不被截断？

如果不需要背景图像，这将很容易，但这是一项要求？是的，它需要是背景图像，并且需要是流体/混合体，而不仅仅是响应性强的固定尺寸？是的，流体在任何移动设备上的宽度应为100%

<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">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                     </td>
                    <td width="20"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

    @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;}
    }