Menu icon Foundation
Reponsive Images in Outlook

As we know, Outlook does not like CSS, and will therefore show all images at full pixel width, unless one is defined in the image tag.

I'm currently designing an email that starts off with two images next two each other on desktop, and then stack at the breakpoint. However, if I define their images sizes so these work in Outlook, they'll be to small to take up the full width after that break (like I want).

Has anybody found a solution to this? Maybe something like making each img have a width="outlooksize" and has a style="width:100%;" that will only be applied not in Outlook?

Thanks all. Struggling with this.

OutlookResponsiveFoundationimages

As we know, Outlook does not like CSS, and will therefore show all images at full pixel width, unless one is defined in the image tag.

I'm currently designing an email that starts off with two images next two each other on desktop, and then stack at the breakpoint. However, if I define their images sizes so these work in Outlook, they'll be to small to take up the full width after that break (like I want).

Has anybody found a solution to this? Maybe something like making each img have a width="outlooksize" and has a style="width:100%;" that will only be applied not in Outlook?

Thanks all. Struggling with this.

Scott Ledbetter about 2 years ago

Awesome. I actually just arrived at the same solution a couple hours ago.

Took me a while to find a solution online, so hopefully this will help some people searching. A good way to make use of Outlook's ignoring of CSS while still maintaining responsive images.

<img src="path.jpg" width="width in outlook" style="width: 100% (fluid everywhere else);">

Should this be in foundation's documentation?

Rafi Benkual about 2 years ago

It's a good thing to have in the Tips and Tricks page. I'll add it there!

Also, be sure to hit the helpful button ;)

Renush 3 months ago

Bing stores and uses your search history to personalize your results. And clearing the history in your web browser doesn’t touch the history stored on deletebinghistory itself, which likely comes from multiple devices you use. You can clear that history.

chi phi chua benh sui mao ga 2 months ago

Nếu bạn đang thắc mắc chi phí điều trị sùi mào gà tại Phòng khám sùi mào gà TPHCM bao nhiêu tiền thì hãy tham khảo những san sẻ của chính những bác sĩ chuyên khoa tại 1 trong các phòng khám điều trị sùi mào gà uy tín ngày nay tại TPHCM – Phòng khám đa khoa Đại Đông tổng đài tư vấn sức khỏe miễn phí 24/24