Setting mktoImgWidth to 100% | Community
Skip to main content
G
gkrajeski-SWLN
New Participant
April 19, 2018
Solved

Setting mktoImgWidth to 100%

  • April 19, 2018
  • 2 replies
  • 3181 views

I have only seen syntax for pixel widths for the mktoImgWidth attribute.

Does anyone know how to set it so the <img> returned has width="100%" as an attribute?

Tried this without success:

<div class="mktoImg" id="heroImage" mktoName="Hero Image" mktoImgWidth="100%" mktoImgSrc="image-source-url.jpg"></div>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Casey_Grimes2

Personally, I wouldn't use 100% for image width settings, because this encourages end users to not properly scale their images to 1x/2x, thus causing blurriness on the rendering end. It's much more straightforward to use CSS (so you can responsively scale for both older clients like Outlook and support high-DPI devices) and placeholder images that clearly denote the image size in pixels. For example, if 100% of your email's width translates to 500px, I'll put a 1000px image in and set it to 500px for screens that are 500px and above, but 100% for those 499px and below to allow for correct scaling. You get your high DPI for devices that support it, a pixel lock for Outlook, and scaling for smaller screens.

2 replies

Casey_Grimes2
Casey_Grimes2Accepted solution
New Participant
April 19, 2018

Personally, I wouldn't use 100% for image width settings, because this encourages end users to not properly scale their images to 1x/2x, thus causing blurriness on the rendering end. It's much more straightforward to use CSS (so you can responsively scale for both older clients like Outlook and support high-DPI devices) and placeholder images that clearly denote the image size in pixels. For example, if 100% of your email's width translates to 500px, I'll put a 1000px image in and set it to 500px for screens that are 500px and above, but 100% for those 499px and below to allow for correct scaling. You get your high DPI for devices that support it, a pixel lock for Outlook, and scaling for smaller screens.

G
gkrajeski-SWLNAuthor
New Participant
April 19, 2018

I ended up just adding a class to the <div> and then set via CSS as @Courtney Grimes​ suggested

Gerard_Donnell4
Gerard_Donnell4
New Participant
April 19, 2018

Hi @Geoffrey Krajeski​,

Have you tried using just the width element on the td tag?

Here is the code I use for a banner.

<table class="mktoModule" id="mkto-banner-700b294445e-f7fc-4a41-ae0e-86afc0ed6f6c" mktoname="Banner 700" style="padding-bottom:15px;" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

                      <tbody>

                        <tr>

                          <td>

                            <table class="container" width="700" align="center" border="0" cellspacing="0" cellpadding="0" style="">

                              <tbody>

                                <tr>

                                  <td valign="top" bgcolor="#ffffff" class="banner" width="100%">

                                    <div class="mktoImg" id="mkto-banner-image-700b294445e-f7fc-4a41-ae0e-86afc0ed6f6c" mktoname="Banner Image 700" mktolockimgsize="true">

                                      <a href="#"><img src="placehold.it/700x180" alt="Add alt text here" class="bannerl"></a>

                                    </div> </td>

                                </tr>

                              </tbody>

                            </table> </td>

                        </tr>

                      </tbody>

                    </table>

Terms & ConditionsAccessibility statement

Loading footer...