responsive images max-width property in newsletter email

Question

I designed a responsive email with several elements, each one with a main image.

To prevent images breaks in iphone resolution and higher, I have:

img { max-width: 320px !important; height: auto !important; }

But then, images that are smaller than 320px scale to this width. I fixed that with:

img { max-width: 100% !important; width: auto !important; height: auto !important; }

This works for the main images, but then the business logo resizes to 100% of its parent container.

How I get the best of each solution?

Answer 1

HTML coding for emails is a PAIN

See this chart: https://www.campaignmonitor.com/css/ (you might have to scroll down the page, but it's there)

There is really little to no consistency between email clients as to what they will recognize. I would recommend just coding a simple page that 'squishes' nicely.

Answer 2

First, your style will applied to all images, including your logo. Since you don't have specific class for images. Second, for email template you should use inline styles and using table for layouts. Example:

<table style="width: 100%; max-width: 600px; margin: 0 auto;">
  <tr>
    <td>
      <img src="main.jpg" style="width: auto; max-width: 100%">
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="logo.png">
    </td>
  </tr>
</table>