AA6
100% Width Images on Outlook
Hello community!
I've been testing some new layouts and here is the problem. I want to give 100% width to certain images, for responsive purposes. Now let's say that the original image is 500px, but my email box is only 300px... giving it 100% width will work beautifully across all browsers and devices, however Outlook will push that image to its original 500px and break the whole layout.
Have anyone figured out how to bypass this issue on Outlook?
By the way, I'm going fluid. So Media Queries are out of question.
Thank you!
Just confirming for others like me with the same issue who stumbled upon this thread, this solution DOES WORK! Yay! Thanks Robert!
This will make it fit in the 300px box, but it won't make the image responsive in most versions of Outlook.
Hey there,
This is what I use in my email framework:
The
width="500"will be used by Outlook. The inline CSS is for responsive, and it basically says "show the image at 100% as long as its container is <=500px. Otherwise, don't enlarge it, just show it in its original size."With this, you can have retina images that behave in Outlook:
Cheers!
Hate to be the bearer of bad news.
width="100%" is technically inline CSS. Because Outlook doesn't have good support for CSS, there's no such thing as fluid in Outlook. (Most desktop clients are not truly fluid.) Your template will need to designed around the width of the image.
However, that brings other issues. For example; a 500px image pulled into your email at 500px is going to be fuzzy on a Retina device. (ipad)
I'm with Nicole on this - you'd be better to set to normal px width and just add a 100% width class for mobile.
Then you'll have a consistent result across clients.
=]