1

The structure of my table is 

                <table  border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="404">
                            <img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
                        </td>
                        <td width="396" bgcolor="#00188F">
                            <h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
                            <h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
                        </td>
                    </tr>
                </table>

aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).

Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:

                <table  border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="404">
                            <img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
                        </td>
                        <td width="396" bgcolor="#00188F">

                        </td>
                    </tr>
                </table>

The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.

enter image description here

Subpar Web Dev
  • 3,210
  • 7
  • 21
  • 35

2 Answers2

2

If you add a display: block to the style of your image it will be fixed.

<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />

The first answer should help you to understand why

EDIT: Actually, you dont need nothing but the display block and the image sizes.

Community
  • 1
  • 1
Felipe Ramos
  • 75
  • 3
0

What are the dimensions of your image? I don't think HTML is "smart" enough to stretch your image to fit to your exact request.

Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.

DougieHauser
  • 460
  • 6
  • 14