'Creating responsive images side-by-side in e-mail using plain HTML

I am attempting to include two images as a header in an e-mail, using pure HTML. One image will cover 40% of the screen width, and the other 60% width (the height for both is just auto). However, the max width for both images combined is 750px, so on large desktop devices, the combined width doesn't stretch further than that.

I learned of a trick involving setting td's to a width of 0 before and after the primary content, which works well for text, but not so well for my images. Here's my code right now:

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="0"></td>
    <td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
    <td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
    <td width="0"></td>
</tr>
</table>

And here is how the images should be displayed

The code isn't working unfortunately; the images always get a fixed width. I've tried removing the empty td's, I've tried using fixed widths instead of percentages, I've tried using width by itself and as a style, I've tried all kinds of variations on putting the widths in different places, but seemingly no matter what I try, I am unable to display the images responsively, side by side. This is an issue on smartphone devices, where the images appear too large. Naturally, I cannot use media queries, as they are not supported in Outlook.

Any suggestions for how I could display the two images side by side responsively?

Thank you!

Best, Javert

htmlcssemailresponsive


Solution 1:[1]

Try this One. Hope it Helps.

<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>

Solution 2:[2]

I was doing the same with mailchimp HTML/Code section, may be helpful for someone.

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageGroupBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" >
    <tbody class="mcnImageGroupBlockOuter">

            <tr>
                <td valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width" class="mcnImageGroupBlockInner">
                                <!--[if mso]>
                <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
                <tr>
                <![endif]-->
                
                <!--[if mso]>
                <td valign="top" width="600" style="width:600px;">
                <![endif]-->   
                    <table align="left" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <tbody><tr>
                                <td class="mcnImageGroupContent" valign="top" style=";mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                
                                    
                                        <img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
                                    
                                
                                </td>
                            </tr>
                        </tbody></table>
                    
                    <table align="center" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <tbody><tr>
                                <td class="mcnImageGroupContent" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                
                                    
                                        <img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
                                    
                                
                                </td>
                            </tr>
                        </tbody></table>
                        <!--[if mso]>
                </td>
                <![endif]-->
                
                <!--[if mso]>
                </tr>
                </table>
                <![endif]-->
                    
                </td>
            </tr>
        
    </tbody>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kevin
Solution 2 dig99

Related Questions