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

Question

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

    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>

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

Answer 1

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

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

如果我们将宽度保留为 100% 宽度，那可能与高度不一样，因为那些 margins/paddings。

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

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

Possible to match height of element with variable width of mobile device? (html email; no JS)

html

css

html-email

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

Possible to match height of element with variable width of mobile device? (html email; no JS)

html

css

html-email

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