Image resizing issue

I have a cell within a table for an editable image, I want the cell to be 367px, but the test image is only 112px wide by 110px high. When testing on CM the image is scaling up proportionally to the full 367 px in Outlook 2007/2010/2013.

Can anyone suggest a way to prevent this happening?

roshodgekiss roshodgekiss, 1 year ago

Hi iainbunt    - this is quite unusual. Would you be able to post your HTML and CSS code here? We'll happily take a look at what's going on and suggest a workaround.

Upfront, my guess may be that something like <img style="width: 100%/auto;" ... > may have been applied - just a wild guess, but it may be causing issues if it's there.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
iainbunt, 1 year ago

The code is as follows...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>An email message from HBJ Gateley</title>
    <style type="text/css">
    * {padding:0; margin:0}
    img {border:none}
    a {font-weight:bold;}
    a:hover { text-decoration: none !important; color:#250858 }
    h1 {color: #250858 !important; font: normal 48px/55px Helvetica, Arial, sans-serif; margin: 0; padding: 0;}
    h2 {color:#ffffff!important}
    .header {width:636px}
    .header p {color: #767676; font: normal 12px Helvetica, Arial, sans-serif; margin: 0; padding: 0; line-height: 18px;}
    .sidebar table.toc-table  { color: #767676; margin: 0; padding: 0; font-size: 12px;font-family: Helvetica, Arial, sans-serif; }
    .sidebar table.toc-table td {padding: 0; margin: 0 0 5px;}
    .sidebar table.toc-table td a {color: #767676; }
    .sidebar h4{color:#eb8484 !important; font-size: 11px;line-height: 16px;font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;}
    .sidebar h3{color:#250858 !important; font-size: 16px;line-height: 16px;font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;}
    .sidebar p {color: #989898; font-size: 11px;line-height: 16px;font-family: Helvetica, Arial, sans-serif; margin: 0 0 16px; padding: 0;}
    .sidebar p a {color: #82cfca; text-decoration: none; margin: 0 0 16px}
    .content h2 {color:#FFF !important; font-weight: bold; margin: 0; padding: 0; line-height: 22px; font-size: 18px; font-family: Helvetica, Arial, sans-serif;  }
    .content p {color:#250858; font-weight: normal; margin: 0; padding: 0; line-height: 18px; font-size: 12px;font-family: Helvetica, Arial, sans-serif;}
    .content a {color: #82cfca; text-decoration: none;}
    .footer p {font-size: 11px; color:#7d7a7a; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;}
    .footer a {color: #250858; text-decoration: none;}
    h3 {text-transform:uppercase;padding:0; margin:0}
    .white {color:#ffffff}
    </style>
  </head>
  <body style="margin: 0; padding: 0; background: #fff;" bgcolor="#fff">
          <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="padding: 0; background: #d3cede;" bgcolor="#d3cede">
          <tr>
              <td align="center">
          <table cellpadding="0" cellspacing="0" border="0" align="center" width="636" style="font-family: Helvetica, Arial, sans-serif;background:#ffffff url(http://www.gateleyuk.com/images/5267/full/jpeg) repeat-y;" class="header">
                      <tr>
                        <td width="600" colspan="3" align="left" style="padding: 0; font-size: 0; line-height: 0;"><img src="http://www.gateleyuk.com/images/5273/full/jpeg" style="margin-left:18px" alt="header bg" /></td>
            </tr>
                          <tr><td width="18"></td>
                        <td width="600" align="left" style="background:#250858; margin: 0 18px; font-size: 0; line-height: 0; height:4px; width:600px" height="4"></td>
                     <td width="18"></td> </tr></table><!-- header-->
                    
                    
                    <!--Big image and heading Body table-->
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="636" style="font-family: Helvetica, Arial, sans-serif; background:#ffffff url(http://www.gateleyuk.com/images/5267/full/jpeg) repeat-y; padding:0" bgcolor="#fff">
                      <tr>
                    <td width="600" style="padding:0 18px" valign="top" align="center"><img editable="true" src="http://www.gateleyuk.com/images/5287/full/jpeg" width="600" label="house image" /></td>
                    </tr>
                    <tr>
                                        <td width="366" style="padding: 5px 120px 34px 38px;" valign="top"><h1><singleline>Property Dispute Seminar</singleline></h1></td>
                  </tr> </table>
                                    <!-- Close Big image and heading Body table-->
                                    
                                    <!--START OF MAIN BODY-->
                <table cellpadding="0" cellspacing="0" border="0" width="636" align="center" style="font-family: Helvetica, Arial, sans-serif; background:#ffffff url(http://www.gateleyuk.com/images/5267/full/jpeg) repeat-y; padding:0!important;" bgcolor="#fff">
                                    <tr><td width="18">&nbsp;</td>
                        <td width="400" valign="top" align="left" style="font-family: Helvetica, Arial, sans-serif; padding: 0" class="content">
                            <table width="400" cellpadding="0" cellspacing="0" border="0" style="color: #717171; font: normal 11px Helvetica, Arial, sans-serif; margin: 0; padding: 0;">
                                
                                    <tr>
                                        <td width="20" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="20" /></td>
                                        <td width="367" style="padding: 0 0 8px;" valign="top"><multiline label='Main Text'><p>Dear [firstname,fallback=Sir or Madam],<br /><br /> 
Have you been meaning to talk to us about reviewing your Will or to discuss some other aspect of your affairs? Do you think it is a fairly minor matter which doesn't justify you making a formal appointment?<br /><br />
We will be holding 'open house' at our Birmingham office, One Eleven Edmund Street, Birmingham, B3 2HJ.<br /><br />
Feel free to call in at any time between 10.00 am and 12 noon. You will then have the opportunity for an informal chat with one of our solicitors, over a cup of tea or coffee.<br /><br />
Appointment are not necessary, but it would help with catering etc, if you can indicate an intention to attend by click on the link below.<br /><br />
<a href="http://www.gateleyuk.com/drop-by-for-coffee/" target="_blank">http://www.gateleyuk.com/drop-by-for-coffee/</a><br />
<br />
We look forward to hearing from you.<br /><br />
With kind regards<br /><br />
Neil Armstrong
<br />
<br />
Director of marketing &amp; business development
<br />
<br />
<a href="mailto:narmstrong@hbjgateley.com">narmstrong@hbjgateley.com</a></p></multiline></td>
                                        <td width="13" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="13" /></td>
                                    </tr> 
                                    <tr>
                                        <td width="20" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="20" /></td>
                                        <td width="367" style="padding: 0" valign="top"><img src="http://www.gateleyuk.com/images/5263/full/jpeg" alt="" style="border-top: 10px solid #fff" /></td>
                                        <td width="13" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="13" /></td>
                                    </tr>
                                    <tr>
                                        <td width="20" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="20 /" /></td>
                                        <td width="367" style="padding: 0" valign="top"><img align="left" editable="true" width="367" src="http://www.gateleyuk.com/images/5286/full/jpeg" alt="Neil Armstrong" style="width:112px; height:110px" label="Neil Armstrong" /></td>
                                        <td width="13" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="13" /></td>
                                    </tr>
                                    <tr>
                                        <td width="20" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="20" /></td>
                                        <td width="367" style="padding: 0" valign="top">
                                            <img src="http://www.gateleyuk.com/images/5263/full/jpeg" alt="" style="border-top: 10px solid #fff" />                                        </td>
                                        <td width="13" style="font-size: 1px; line-height: 1px;"><img src="http://www.gateleyuk.com/images/5285/full/gif" alt="space" width="13" /></td>
                                    </tr>
                                    </table>                            </td>
                <!--SIDEBAR START-->
                <td width="199" valign="top" align="left" style="font-family: Helvetica, Arial, sans-serif;" class="sidebar">
                    <table cellpadding="0" height="42" cellspacing="0" border="0" style="background:#250858; color: #717171; font: normal 11px Helvetica, Arial, sans-serif; margin: 0 10px 0 0; padding: 0; overflow:hidden;">
                    <tr><td align="left" width="21"><img src="http://www.gateleyuk.com/images/5270/full/jpeg" style="background:#250858" alt=" " width="21" height="42" /></td>
                    <td height="42" style="background:#250858; padding: 0; overflow:hidden" valign="top" align="left">
                    <h2 style="font-weight: bold; margin: 0; border-top:14px solid #250858; border-bottom:none; line-height: 16px; font-size: 15px; text-transform:uppercase;font-family: Helvetica, Arial, sans-serif; color:#ffffff"><singleline>Information:</singleline></h2></td>
                        <td><img src="http://www.gateleyuk.com/images/5271/full/jpeg" style="background:#250858" alt=" " width="19" height="42" /></td> </tr></table>
                        <table width="199" cellpadding="0" background="#e8e8e8" cellspacing="0" border="0" style="color: #717171; font: normal 11px Helvetica, Arial, sans-serif; margin: 0; padding: 0; border-top:3px solid #250858">
                             <tr>
                                <td width="159" colspan="3" style="background:#e8e8e8; border:20px solid #e8e8e8; color:#250858; line-height: 16px; font-size: 12px;  padding: 0 0 0 1px;"><multiline><h3>Who</h3>
<p style="color:#250858; line-height: 16px; font-size: 12px">Commercial property professionals</p>
 <h3>What</h3>
<p style="color:#250858; line-height: 16px; font-size: 12px">Property Dispute Seminar</p>
<h3>Where</h3>
<p style="color:#250858; line-height: 16px; font-size: 12px">HBJ Gateley, 19 Canning Street, Edinburgh. View map.</p>
 <h3>When</h3>
<p style="color:#250858; line-height: 16px; font-size: 12px">Tuesday 12 June 2012, 18.00-20.00<br />
(registration from 17.30)</p>
<p><a href="http://www.gateleyuk.com/news-and-events/events/" style="font-size: 16px;line-height: 16px; text-transform:uppercase; margin-bottom:16px">Register here</a></p>
<p><a href="http://www.gateleyuk.com/downloads/1347614866-ICS_TEST.ics" style="font-size: 16px;line-height: 16px; text-transform:uppercase; margin:0">Add to calendar</a></p></multiline></td></tr>
                        <tr>
                        <td colspan="3" align="center"><img src="http://www.gateleyuk.com/images/5269/full/jpeg" alt="" width="159" height="17" /></td>
                        </tr><tr>
                        <td colspan="3" width="159" style="background:#e8e8e8;border:20px solid #e8e8e8; color:#82cfca; line-height: 16px; font-size: 12px; padding: 0 0 0 1px;">    
                            <multiline><p style="color:#82cfca; font-size:12px; line-height:16px"><a href="http://www.hbjgateley.com" target="_blank">Visit our website</a><br />
                            <a href="http://www.gateleyuk.com/news-and-events/events/" target="_blank">View more events</a><br />
                            <a href="http://www.gateleyuk.com/news-and-events/news/" target="_blank">View latest news</a><br />
<forwardtoafriend style="font-weight:bold">Forward to a friend</forwardtoafriend></p>
                                    <a href="http://www.twitter.com/HBJ_Gateley"><img src="http://www.gateleyuk.com/images/5272/full/jpeg" alt="twitter" /></a><a href="http://www.linkedin.com/company/hbj-gateley"><img src="http://www.gateleyuk.com/images/5266/full/jpeg" alt="Linked In" /></a><img src="http://www.gateleyuk.com/images/5264/full/jpeg" alt="facebook" /></multiline></td>
                            </tr>
                            </table></td>
                            <td width="18">&nbsp;</td>
                    </tr>
                   <tr><td colspan="4">
                   <!--PURPLE LINE-->
                   <table cellpadding="0" cellspacing="0" border="0" align="center" width="636" style="clear:both; font-family: Helvetica, Arial, sans-serif;background:#ffffff url(http://www.gateleyuk.com/images/5267/full/jpeg) repeat-y;" class="header">
                      <tr><td width="18"></td>
                        <td width="600" align="left" style="background:#250858; margin: 0 18px; font-size: 0; line-height: 0; height:4px; width:600px" height="4"></td>
                     <td width="18"></td> </tr>
                    </table><!--END OF PURPLE LINE-->
                    </td></tr></table><!--END OF MAIN BODY-->
                
            <!-- body -->
              <table cellpadding="0" cellspacing="0" border="0" align="center" width="636" style="clear:both; font-family: Helvetica, Arial, sans-serif; line-height: 10px;background:#ffffff url(http://www.gateleyuk.com/images/5267/full/jpeg) repeat-y;" class="footer">
                <tr>
                    <td align="center" style="font-size: 11px; color:#7d7a7a; margin: 0 0 5px; line-height: 1.2;font-family: Helvetica, Arial, sans-serif;" valign="top"> <img src="http://www.gateleyuk.com/images/5265/full/jpeg" alt="space" width="600" />
                        <p style="font-size: 11px; color:#7d7a7a; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
                          <singleline label="Title">You are receiving this newsletter because you have previously used the services of HBJ Gateley.</singleline>
                        </p>
                        <p style="font-size: 11px; color:#7d7a7a; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Having trouble reading this? <webversion style="color: #250858; text-decoration: none;">View it in your browser</webversion>. Not interested? <unsubscribe style="color: #250858; text-decoration: none;">Unsubscribe</unsubscribe> instantly.</p>
                    </td>
                </tr>
              </table><!-- footer-->
                
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="636" style="" class="footer">
                <tr>
                    <td align="center" style="padding: 0; font-size: 11px; color:#7d7a7a; margin: 0;" valign="top">
                        <img src="http://www.gateleyuk.com/images/5262/full/jpeg" width="636" />
                    </td>
                  </tr>
                </table>
              </td>
    </tr></table>
  </body>
</html>

Thanks in advance for any help

Stig Stig, 1 year ago

Great, thanks for posting that, iainbunt!

So, this is the problematic image tag, correct?

 <td width="367" style="padding: 0" valign="top"><img align="left" editable="true" width="367" src="http://www.gateleyuk.com/images/5286/full/jpeg" alt="Neil Armstrong" style="width:112px; height:110px" label="Neil Armstrong" />

I see you have a width="367" HTML attribute, but the CSS width:112px; in the style attribute. So it sounds like the HTML attribute is taking precedence over the CSS in Outlook, resulting in the scaled up image.

Can you try replacing that with the following?

 <td width="367" style="padding: 0" valign="top"><img align="left" editable="true" width="112" src="http://www.gateleyuk.com/images/5286/full/jpeg" alt="Neil Armstrong" label="Neil Armstrong" />

With editable images, it's best to only define a width, and to only define it using the HTML attribute, to avoid conflicting values.

Let us know how that works for you.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
iainbunt, 1 year ago

I'm sure that will work, but other people will be using this template and may need to put wider images in that space, won't this cause a problem?

roshodgekiss roshodgekiss, 1 year ago

Hi iainbunt, the width you define in the <img> tag will be the maximum size an image uploaded to this editable region can be. If the uploaded image is any larger, it will be scaled down to width="112".

We recommend defining a width that's appropriate to your design, but overall, you can't define two widths inline. Let us know if you have any questions about this :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account