Foundation-emails: Non-responsive images in IE 10 and 11

[coreyschaaf]

How can we reproduce this bug?
Open any foundation for email 2 template that has an image of at least 580px.

What did you expect to happen?
The images should be responsive and collapse proportionally.

What happened instead?
The actual width of the image is being set and expanding beyond the viewport.

What email clients does this happen in?
IE 10 / 11. You can also send to any hotmail.com or outlook.com address, click the view in browser link and see the same behavior.

[rafibomb]

Trying to narrow this down since it doesn't happen on Litmus tests. Is it happening in the browser without sending the email, or is only happening when the email is opened from the email client in browser?

[coreyschaaf]

I can reproduce this pre and post inlining . I can also send out an email that is inlined and have the desktop version look fine. However, after clicking the web browser version and then collapse it to the small break point .. The layout expands to the size of the largest retina inage.

[coreyschaaf]

I can create a video and post it so you can see the behavior in the morning if that will be helpful.

[coreyschaaf]

Here is a video link so you can see what is happening. Note this video is just a local file. However, if I inline and send this out, the same results happen. The images are 100% of their actual size which extends the containers beyond the viewport.
https://drive.google.com/open?id=0B87GFvVftM5Oc3ZXd09uNHA2Qmc

[marcpartridge]

Not sure if this is the same but I had a similar issue trying to display retina ready images in a smaller column and Explorer just forced them to be the size of the actual image and breaking the email.
I seem to have fixed my issue by placing the size I wanted to the image width attribute directly on the tag (in my case 266) and then also applying a class to the image that sets the width to 100%.

Seems to be working for me now. It now retains the size I want it to be but also responds when I resize the window. This may fix your issue as well?

[janzelc]

We have encountered a similar issue with Outlook on Windows. As the previous poster said, you can put an absolute width on the image using the width attribute and that seems to fix the issue. However, our emails have user-generated content in them and as such it is not possible to hardcode the width into the template. We have a workaround (generate thumbnails of the images with a predictable width), but it is not ideal.

[lspoor]

I fixed this IE10/11 issue using:

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