CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
user4747724
user4747724

Reputation:

Why is outlook stretching out my images height?

This week I was introduced to the wonder that is html emails. I have an email that needs to display an image and some text side by side. The problem that I'm coming up against is that the image is getting stretched vertically instead of the height being auto set by the width. This problem only happens in outlook.

This is what is being rendered: enter image description here

and this is the code that makes it up:

<table class="container" align="center" width="640" cellpadding="0" cellspacing="0">
  <tr>
    <td width="256" style="width:40%; float:left; text-align:right;">
      <img class="max-image" width="256" style="display:block;width:100%; height:auto;" src="https://cdn.pixabay.com/photo/2015/06/25/17/56/people-821624_1280.jpg" alt="coach picture"/>
    </td>
    <td width="384" style="width:60%; float:left; text-align:center;">
      <table width="100%">
        <tr>
          <td width="10"></td>
          <td>
            <div style="padding-left: 10px;text-align: center;">
              <p style="color:#6AA342;"><strong>Meet The Coach</strong></p>
              <p>{{ coach_first_name }}</p>
              <p>{{ bio }}</p>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

From what I've gathered online so far, outlook doesn't seem to like when you don't explicitly set the height property of the image, but the issue I have is that this image is dynamically set and it may be a different aspect ratio from email to email, so I can't really set the height of the image.

Upvotes: 1

Views: 5412

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49455

If you take a look at the following line:

<td width="256" style="width:40%; float:left; text-align:right;">

You may see the float:left property which is not supported in Outlook. The fact is that Outlook uses Word for rendering HTML bodies.

You can find the full list supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:

Upvotes: 1

Related Questions