0

I have a 1x2 HTML table that will be the heading of an email. The first column contains a linked image, the second a heading.

        <table>         
        <tr>
            <td width="50%" style="text-align:left; padding-left:10%;">
                <a target="_blank" href="http://www.google.com/">
                    <img src="img/logo.jpg" alt="Logo" 
                    style="width:30%; height:30%;"
                     />
                </a>
            </td>

            <td width="50%" style="text-align:right; padding-right:10%;">
                <h2>Order Confirmation</h2>
            </td>
        </tr>
    </table>

As you can see, the image in the left cell is aligned left, and the heading in the right cell is aligned right, each element with 10% space from the edge (padding).

PROBLEM: The dimensions of my image are being distorted! I have the img's width and height both set to 30%, but it's still getting distorted. I'm guessing this has something to do with the table, but I cannot figure it out. Let me know!

ps: I have to use inline styling and tables for this project.

freezefry
  • 138
  • 4
  • 21
  • 3
    you're setting relative sizes on the image via css, which means they're assuming 30% of the width/height of their container, which is the table cell... – Marc B May 26 '15 at 15:44

1 Answers1

2

As mentioned in the following SO {Resize image proportionally with CSS?}

You shouldn't try and constrain both dimensions and just set your width to 30% and your height to 'auto'. Give that a shot.

Community
  • 1
  • 1
beauXjames
  • 8,222
  • 3
  • 49
  • 66