How to make images flexible on Outlook?
I tried with #media, width:100%, max-width:150px and other stuff like that, but it doesn't work.
There is no support in outlook for #media and max-width: 150%
but you can use width="100%"
<img src="..." width="100%" style="display: block" alt="some alt" />
Related
I have it working in modern browsers but old browsers that don't support media queries it will display 2 logos.
<img src="logo-sm.jpg" class="visible-xs-inline-block" />
<img src="logo.jpg" class="hidden-xs" />
use class img-responsive to make images responsive.
<img src="logo-sm.jpg" class="img-responsive" />
I want to make the grey images center aligned. Please guide me how can I do this.
Here is what I have tried:
<div id="responsivearea" style="margin-top: 50px;">
<div class="img-center">
<img style="clear:none;" class="size-thumbnail wp-image-2707" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/visa-logo2-150x150.jpg" alt="visa logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2705" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/nethope-logo1-150x150.jpg" alt="nethope logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2704" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/ILO-logo1-150x150.jpg" alt="ILO logo" width="150" height="150" />
</div>
</div>
Here is the site.
Simply use:
.img-center{text-align: center;}
As suggested already, magin auto... using your existing img-center class
.img-center{
margin:auto;
vertical-align:middle; /* If you mean vertically aligned */
}
text-align can work but is a little funny in cross browser support...
margin auto generally does the job and should work
otherwise just wrap them with center tags, while people may frown upon using center tags..THEY WORK CROSS BROWSER!! so they will NOT fail!
Otherwise, if you mean the footer images/logos on the site.. They are in a P tag without any class.. You can simply apply a text-align:center: to that p tag.
Set margin to auto. The browser will align the images to center for you
img {
margin: auto;
}
CSS
.image {
height:50px;
}
HTML
<div class='span6'>
<img class='image' />
</div>
<div class='span6'>
<img class='image' />
</div>
Is it possible to cancel the style when the Bootstrap's responsive works?
I need these image to be displayed without crop by CSS, assuming that the picture's height is 400px.
Thank you
You need to surround the images with a maximum width that you wish them to be able to go. Preferably in percentage so that it scales on all devices.
Then add the class="img-responsive" to your image tags.
For example
<img src="/path/to/your/image/logo.png" class="img-responsive" alt="Something about the image">
I'm having trouble with email formatting for emails received in the GoogleMail web client.
Space is added after the images in the table making gaps in my content, exactly the same as this question - Gmail displaying gaps between images.
Adding the inline style 'display: block;' fixes the issue in the MailChimp preview.
However the inline image styles are being removed at some point between me previewing them in the MailChimp and receiving them in my inbox, re-adding the inline CSS manually fixes it again so that's definitely the issue.
Style in MailChimp Template
<img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;">
Style when read by GoogleMail
<img src="IMAGE_PATH" alt="" border="0" width="700" height="665">
Is there a reason this is happening? Is it on MailChimps or GoogleMails side?
It looks like Gmail is stripping out the style attribute, because it doesn't like something.
A few things to try:
1) Remove the extra space at the beginning of your style declaration:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;">
2) Specify !important:
(reference:http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css)
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block !important;">
3) Try adding line-height to the containing td element:
(reference: http://www.webdevdoor.com/html-css/html-email-development-tips/)
<td style="line-height:0px;">
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;"></td>
One more to try
4) Add width="700" attribute (maybe toss height in as well) to img tag and only specify display:block; in style attribute:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
width="700" height="665" style="display:block;">
Here's another one
5) The HTML5 doctype can cause rendering problems. Try using this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Last one...
6) Just noticed that you set mc:allowdesigner="" and mc:allowtext="", what happens if you remove the ="" from those two?
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner mc:allowtext
style="width:700px; display:block;">
Hopefully, one of these will work for you.
For me it's help (adding <p style="margin: 0;font-size: 0;line-height: 0;"> in <td>):
<td><p style="margin: 0;font-size: 0;line-height: 0;"><img src="{IMG_PATH}/w_bottom.jpg"
alt="" height="8" width="653"/></p></td>
It's definitely not the case that Gmail will always strip out style="display: block" on images. As #Fletch states, the simplest thing would be to do this:
<img src="" id="headerImage width="700" style="display: block;">
...rather than setting the width using an inline style. Outlook 07/10 won't obey widths set using style anyway in some instances, so its safest to set it that way. Or just leave out width altogether (necessary for a responsive email design).
You'll need to put your complete code somewhere, as it must be something else within the HTML causing problems, as the above code works perfectly.
I was struggling with this for a long while, added this to the section.
table{
border:0px;
border-spacing:0px;
border-collapse:collapse;
}
td{
line-height:0px;
}
tr{
display:block;
}
I hope this solves your issue, as this was quite the frustrating problem for me.
Gmail automatically adds a paragraph tag to the table data tags. Adding a paragraph tag with styles worked for me.
<td><p style="margin: 0;font-size: 0;line-height: 0;"><img /></p><td>
I'm creating an HTML email and since background images can't be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I've searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell?
Here are the things I've tried so far:
<td width="25" style="margin:0; padding:0;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>
stretches the image to 100% height of the entire table (even though the table is nested in a <td>.
<td width="25" height="100%" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
ditto
<td width="25" height="1" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
setting a smaller td size does not force it to stretch as expected.
I assume you're mostly running into trouble in Outlook?
Hotmail doesn't recognize background images, but it does seem to recognize height="100%."
In my own tests, declaring height="100%" on an image, does successfully stretch it to the height of the cell in the major web-based clients (Hotmail, Gmail, Yahoo).
Outlook only allows image stretching to a fixed size (and the image can only be stretched proportionately in both directions). The other clients allow significant stretching in one direction (up to ~4000% of the original size?)
Tips:
1) Use a tall image sized to fit Outlook, or slightly taller.
2) Using height="100%" will still stretch the image as needed in most non-Outlook clients.
3) Declaring a vertically repeating background image for the table cell is also useful as a fallback (but it won't help you with Outlook or Hotmail.)
Here is my preferred solution for border images:
<td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
<img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
</td>
Try making the height of the cell a percentage instead of pixels in css. Like how Jezen Thomas said, use css but this time do it like this.
td {border: 4px solid red; height: /*height in desired percentage*/%; valign:top;}
img {height: 100%; width: 100%;}
Plus formatting webpages or email in just tables is bad practice. You should try to do it entirely in css and use tables only for tabular data. But since it's what you want to do I am not going to stop you.
Is it ok if you get the rest of the html so I can show the proper css way to do it if you are interested?
Never use div's in emails, gmail and android does not support this.
Its not possible for at image to have a 100% height or width in an e-mail.
You have to type the exact size in px. Its pretty annoying