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

Question

Working on an HTML email where I need the height of a table to match the width of the mobile device. Background image utilized has aspect ratio of 1:1. The background needs to fill width of device, so the height of the table will need to match width of the mobile device. The two boxes stack on mobile.

    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>

In the above example, the red box table will have a variable height. Is it possible to have the red box's height match the width of the mobile device so that the full background is shown?

Answer 1

vw is well supported, so can be used: https://www.caniemail.com/search/?s=vw

Syfer is probably right that 100vw may not be possible due to small margins and paddings, however, if the code is centered, that may not matter. You'd need to thoroughly test this, but you could set both width and height to about 95vw !important ("95% of the viewport width"), and that appears to work well from a cursory look.

If we left width at 100% width, that might not be the same as the height, because of those 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;
}