可以将元素的高度与移动设备的可变宽度相匹配吗？（html 电子邮件；没有 JS）答案

【问题标题】：Possible to match height of element with variable width of mobile device? (html email; no JS)可以将元素的高度与移动设备的可变宽度相匹配吗？（html 电子邮件；没有 JS）
【发布时间】：2020-10-27 03:54:03
【问题描述】：

在处理 HTML 电子邮件时，我需要表格的高度与移动设备的宽度相匹配。使用的背景图像具有 1:1 的纵横比。背景需要填充设备的宽度，因此表格的高度需要与移动设备的宽度相匹配。这两个盒子在移动设备上堆叠。

    td {font-family: Helvetica;}

    @media only screen and (max-width:414px){
    .bg {
        width: 100% !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        display: block !important;
    }
    .imgWidth {
        width: 100%!important;
        height: auto !important;
        min-width: 100%!important
    }
    .fullWidth {
        width: 100%!important;
        min-width: 100%!important
    }}

       <table cellpadding="0" cellspacing="0" width="600" align="center" class="fullWidth">
         <tr>
            <td width="600" class="fullWidth">
                <table align="left" cellpadding="0" cellspacing="0" class="fullWidth" width="300" height="300">
                    <tr>
                        <td class="fullWidth"><img src="https://dummyimage.com/300x300/c9c9c9/939396" style="display:block;" width="100%" class="imgWidth" border="0"  /></td>
                    </tr>
                </table>
                <!-- height of below table (red box) needs to match width of device -->
                <table align="left" cellpadding="0" cellspacing="0" class="bg" width="300" height="300" background="https://dummyimage.com/300x300/de4811/e0fbff">
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0">
                                <tr><td>Hello world</td></tr>
                                <tr><td>Hello world 2</td></tr>
                                <tr><td>Hello world 3</td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- end -->
            </td>
        </tr>
      </table>

在上面的例子中，红框表格的高度是可变的。是否可以让红色框的高度与移动设备的宽度相匹配，从而显示完整的背景？

【问题讨论】：

不要认为这是可能的。几乎每台设备都会在图像周围为您提供边距/填充。

标签： html css html-email

【解决方案1】：

vw很好支持，所以可以使用：https://www.caniemail.com/search/?s=vw

Syfer 可能是对的，由于边距和填充小，可能无法实现 100vw，但是，如果代码居中，则可能无关紧要。您需要对此进行彻底测试，但您可以将宽度和高度都设置为大约 95vw !important（“视口宽度的 95%”），粗略看来，这似乎工作得很好。

如果我们将宽度保留为 100% 宽度，则可能与高度不同，因为这些边距/填充。

@media only screen and (max-width: 414px)
.bg {
    width: 95vw !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    display: block !important;
    height: 95vw !important;
}

【讨论】：