Thunderbird and Outlook don't respect max-width or percentage-based widths. In the image section of the docs, we recommend that you apply HTML height and width attributes directly to your <img> tags to restrict the size on desktop browsers (the images will switch to width: auto; and respect max-width on most mobile clients).

Since you're using the .text-pad class, you should also keep in mind that the image width will be the column width minus the padding that gets applied (10px on either side), giving you a 560px wide image (with a height of 290px to maintain the aspect ratio). The <img> tag with the dimension attributes should look like the example below.

<img width="560" height="290" src="/path/to/image/580x300.gif" alt="image is here">

from foundation-emails.

@elm232 Thank you very much for a very clear answer and my apologies for not having understood the docs properly.

from foundation-emails.

Not at all, we'd love your help in making the docs more clear on the issue.

from foundation-emails.

1. My first major issue was I did not know Thunderbird ignored max-width. Also, there appears to be a typo, "Panels" should be "Images". I know there are tonns of resources, but I jumped onto the Ink bandwagon because you guys have made a great resource. If there had been a "note" beside Thunderbird stating max-width was ignored I would have saved considerable time.

   Panels work as expected in most major email clients.

2. The heading Retina Images made me (initially) skip it, I would probably rename it to "Images" as the content also applies to desktop images.

3. I would suggest rewording the headings and paragraphs. I wouldn't know what to, I have attempted to do it myself. Here is a poor mans version:

   Responsive Images & Desktop

   On small screen devices Ink will cause the image to expand to its full width or the width of the parent element (whichever is smaller). On some desktops the width and height must explicitly be declared and the image will not resize.

   Example code here

   Markup

   When using retina or other high resolution images that will be too wide for the parent element, put height and width HTML attributes on the tag. Set the width attribute to correspond with the .columns class used for the parent element using the Column Sizes chart below (this is if you would like the image to fill the parent element). Height should also be explicitly declared on the tag.

   Chart goes here

On writing that, I found "On small screen devices, Ink will cause the image to expand to its full width (or the width or its parent element, whichever is smaller)." to be quite confusing. I still don't really understand what the two behaviours are, only that it will be 100% of the parent element width on a small screen if it is really large.

from foundation-emails.