I want to set the image size to 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td background="http://source/bg.png">
<img src="http://source/logo.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
So I have a big td with bg-image and a logo on top of it with some text.I am doing css all in-line to be able to send html email.
The problem is that the image has it's natural size, and doesn't resize to 100% to fit the td size.
Firstly, emails are a pain when it comes to CSS / HTML Standards... Google will help you here.. In general.. Your best testing this with outlook/hotmail/gmail.. Outlook is one of the worse for supporting HTML Emails.
As for the code, have a look at this example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
Please note though, background-size is only supported in CSS3, IE9+..
Otherwise another option is to use a normal image tag and stretch that to 100% then position with a z-index your content / a div over top of it.
Email Support Guide Line: https://www.campaignmonitor.com/css/
The above is also under the assumption you are talking about the background image and not the logo / img tag.
If you mean your img tag, then simply apply a style to it.. But do believe you mean your TD background image
Building on Mayem's answer, which is 100% right in almost all email clients, I wanted to add a bit more to it. This will not work in Outlook at all and has potential for issues with Gmail app.
1.) Outlook almost always forces actual size of the image, regardless of CSS or HTML resizing (size is also based on the PPI setting on your computer) so it is always best to size your images to fit what you want them to display at in Outlook and then control size for all other clients.
2.) Outlook does not support background image, so you will need to use VML to mimic this for outook - best place for that is http://backgrounds.cm/. It will do most of the work for you.
3.) Gmail does not read stylesheets, so the code will likely lead to a deformed version when displayed on gmail app - this is something you will need to work on from a design/layout perspective
4.) Margin-left and most of the code on the overlay content needs work for email HTML as it is not supported on many email clients.
See below code that is built from Mayhem's answer with some tweaks and the Outlook conditional VML added in.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
<tr>
<td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
<v:fill type="tile" src="http://placehold.it/960x550" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td> </tr>
</table>
simply change
<img src="http://source/logo.png" style="margin-left:35%;" />
to
<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />
A more correct solution is to change
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
to
<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />
Related
I'm currently building a new HTML-template.
In one section I want to display a different image size for MS-Outlook, as it doesn't react in the same way as other clients.
Original:
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" class="mso-size" src="https://xxx" width="100%">
</td>
I need to show the image with the size width="270";height="190" in Outlook. I would like to use a CSS-declaration in the head.
I was trying the approach below, however it doesn't work. Litmus is showing no change. What am I doing wrong?
Thanks and best,
This is what I tried:
The following structure works well, Litmus shows the expected result:
<!--[if mso]>
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="270" height="190">
</td>
<div style="display:none">
<![endif]-->
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="100%">
</td>
<!--[if mso]>
<div>
<![endif]-->
But, I don't want everyone to be forced to paste in the image-URL twice. I would like to use the CSS in the head instead.
I tried the following declaration (pasted it under the first -section:
<!--[if mso]>
<style>
img.mso-size {
width:270px!important;
height:190px!important;
}
</style>
<![endif]-->
Unfortunately, Outlook on Windows use Word as a rendering engine. While they do support width and height in CSS, they do not for <img> elements. The only way to size an image is to use the HTML width attribute or VML as you showed.
Usually, what I do is declare the width I want in Outlook in the HTML attribute. And then in an inline style on the same image, apply styles I want for other clients. Based on your example, that could give:
<img alt="" src="https://example.com" width="270" style="width:100%; max-width:270px;" />
Note that percentage values in the width attribute are also buggy in The Outlooks on Windows. (They’ll be based on the physical file size and not on the parent’s element size as you’d normally expect.) For more details on CSS support in email clients, you can refer to Can I email.
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.
Instead, I'm doing this:
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.
If you want your content aligned left instead of centered, just leave out the first empty cell.
Example:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
http://jsfiddle.net/YcwM7/
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
The short answer: no.
The long answer:
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
In the head:
<style type="text/css">
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
This is the solution that worked for me
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to #philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
I am making an eBlast for a client (it can be found here)
Everything looks good except the bottom picture of of the gentleman, in Outlook it gets blown up to an enormous size.
I am running into issues in certain Outlook email services. The eBlast passed all Litmus test but Outlook 2010 and 2013, when I further researched the issue I found it was because Max-width and min-width just does not matter in Outlook as it does not read that code.
Can anyone please take a look at this code and suggest some fixes that I could apply to the image at the bottom of the eblast, it currently sits in this code block:
<table style="border-spacing: 0;border-collapse: collapse;vertical-align: top" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;width: 100%;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px" align="center">
<div style="font-size:12px" align="center">
<img class="center" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block;border: none;height: auto;line-height: 100%;margin: 0 auto;float: none;max-width: 146px" align="center" border="0" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="max-width:146px !important; width:50%">
</div>
</td>
</tr>
I would be forever grateful, thanks.
If you're going to be setting a max-width either way why not go ahead and set the size of the image to be that or set it to be a pre-determined width from the get-go.
That way your fallback is that it loads the image at its largest since Outlook is going to ignore that max-width either way and display the full image.
Since you're not going to be going higher than 600px there really shouldn't be any issues with either hard-coding it or just adjusting the actual full size image instead of trying to adjust the size using css.
Part of your problem is that you've got two style attributes in the same element. One of them is going to be ignored. For Outlook, the best solution I've found is to add an old fashioned explicit width="146" before the style where you set a max-width. Outlook will only pay attention the old attribute, while more modern clients will interpret the max-width in the style.
You are correct, Outlook does not support min-width or max-width.
Since Outlook 2010 and 2013 are desktop-only and use Microsoft office to render email, we can use ghost tables and VML to make the image display only at 146 pixels wide in these email clients.
Something like this should do the trick:
<div style="max-width: 146px;">
<!--[if mso]>
/* Everything inside here is only read by Outlook 07/10/13 */
<table cellspacing="0" cellpadding="0" border="0" width="146" align="center">
<tr>
<td>
<![endif]-->
<img class="center" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="width: 100%;">
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
I have made a button for a newsletter using http://buttons.cm/
Although it is supposed to display properly on Outlook, the text is not vertically centered but instead is aligned slightly to the bottom.
Button's original code:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
How it's supposed to look (and how is looking on Mail, for example):
How it's looking on Outlook:
I have tried changing the height and line-height values to ems or % instead of pixels, adding the mso-line-height-rule:exactly property, adding the line-height to the td instead of to the a tag... no luck!
This is the closest I can get it through VML in email to make Outlook listen. It is not perfectly vertical center, but is close.
I changed the VML to include the text and link of the button inside the roundrect tag inside the VML instead of using the a tag for both. This allows better compatability with Outlook because it is utilizing VML (a microsoft language) instead of HTML that would require Word to rewrite/translate it. This combined with a couple small tweaks (e.g. set a defined width) produced the closest to vertical align I could get. VML offers many stylings and other options, but not all translate into Email/Outlook, so keep this in mind if you research into VML.
:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t">
<v:fill type="tile" color="#0072b9" />
<w:anchorlock/>
<center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center>
</v:roundrect>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a>
</div>
</td>
According to W3Schools the align attribute defines the horizontal and not vertrical alignment of content in a cell.
W3Schools specifies that the vertical alignment of the content in a cell can be defined using the valign attribute
<td align="center" valign="middle" width="70%">
Alternatively you can use the vertical-align css attribute defined as an inline style to vertically center an element in its parent container.
You may need to use one or the other or both of the above methods depending on the mail client(s) you are targeting. It pays to check which mail clients support which elements, there are plenty of references online, heres one, you may be able to find better.
mso-text-raise style will help you to achieve proper vertical align
I am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?
<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
<tbody>
<tr>
<td align="center">
<div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
</td>
</tr>
</tbody>
</table>
Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.
Mailchimp solutions
Below is snippet explaining the issue in more detail from here
"This issue usually happens when you are using a picture other than 96dpi.
When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high;
88px/150dpi * 96dpi = 56px
It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.
If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).
This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."
For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.
E.g.
<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />
On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.
Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.
For your actual question I'd try something like this, I'd set a height on my image and ive it display:block
<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center">
<img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
</td>
</tr>
</tbody>
</table>
max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.
Your best solution is to specify a smaller width (and height) in the HTML attributes:
<td align="center">
<div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
</td>
I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.
They work like this:
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tbody>
<tr>
<td>
<img align="center" alt="" src="[image source here]" width="[desired width here]">
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.
MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/
Hope this helps some fellow Googlers!
I am using this with perfect success in Outlook 365 (2022):
<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">