Image stretching in outlook 2007 for Email templates

I am setting up HTML template with 600 px as parent body width, but in … Read more Image stretching in outlook 2007 for Email templates

I am setting up HTML template with 600 px as parent body width, but in outlook 2007 – 2019, full available width is being occupied.

Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.

Expected Image: [![enter image description here][1]][1]

Error Image: [![enter image description here][2]][2]

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
      rel="stylesheet"
      type="text/css"
    />
    <style type="text/css">
      .main-wrapper .email_content p {
        padding-left: 10px;
      }
      img {
        max-width: 600px;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table {
        border-collapse: collapse !important;
      }
      #outlook a {
        padding: 0;
      }
      table td {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table align="center" width="100%" class="main-wrapper">
      <tr>
        <td style="background-color: #dddddd">
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="font-family: Roboto, Arial; font-size: 13px"
          >
            <tr bgcolor="#eeeeee">
              <td align="center">
                <table cellpadding="0" cellspacing="0" width="600" border="0">
                  <tr>
                    <!-- <td style="padding: 20px 20px 20px 20px;"> -->
                    <td style="padding: 20px 0px 20px 0px">
                      <table
                        cellspacing="0"
                        cellpadding="0"
                        border="0"
                        width="100%"
                        style="box-shadow: 0px 0px 4px 2px #e0e0e0"
                      >
                        <tr bgcolor="#ffffff">
                          <!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
                          <td style="color: #666666; padding: 0">
                            <table
                              cellpadding="0"
                              cellspacing="0"
                              border="0"
                              width="100%"
                            >
                              <tr>
                                <td
                                  class="email_content"
                                  style="
                                    padding-bottom: 15px;
                                    background-color: #fafafa;
                                  "
                                >
                                  <div
                                    style="
                                      padding: 5px;
                                      border-radius: 4px 4px 0px 0px;
                                      background-color: #fdaf74;
                                    "
                                  ></div>
                                  <!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
                                  <!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
                                  <img style="padding : 20px 0 0 25px;"
                                  src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
                                  height="40">
                                </td>
                              </tr>
                              <tr>
                                <table style="margin: 0 7px">
                                  <table
                                    align="center"
                                    width="100%"
                                    class="main-wrapper"
                                    style="border-bottom: 1px solid #eee"
                                  >
                                    <tr>
                                      <td>
                                        <table
                                          cellpadding="0"
                                          cellspacing="0"
                                          border="0"
                                          width="100%"
                                          style="font-family: Roboto, Arial"
                                        >
                                          <tr bgcolor="#F2F2F2">
                                            <td align="center">
                                              <table
                                                cellpadding="0"
                                                cellspacing="0"
                                                width="600"
                                                border="0"
                                              >
                                                <tr>
                                                  <td>
                                                    <table
                                                      cellspacing="0"
                                                      cellpadding="0"
                                                      border="0"
                                                      width="100%"
                                                    >
                                                      <tr bgcolor="#ffffff">
                                                        <td>
                                                          <table
                                                            cellpadding="0"
                                                            cellspacing="0"
                                                            border="0"
                                                            width="100%"
                                                          >
                                                            <tr>
                                                              <td
                                                                style="
                                                                  text-align: left;
                                                                  font-size: 16px;
                                                                  padding: 6px 0
                                                                    10px 18px;
                                                                "
                                                              >
                                                                <p
                                                                  style="
                                                                    color: #1a1a1a;
                                                                  "
                                                                >
                                                                  Hi Sheetal
                                                                  Chourasiya,
                                                                </p>
                                                                <p
                                                                  style="
                                                                    color: #505050;
                                                                  "
                                                                >
                                                                  You have
                                                                  received Plum
                                                                  E-Gift Card.
                                                                  Congratulations!
                                                                </p>
                                                              </td>
                                                            </tr>
                                                            <tr>
                                                              <td
                                                                align="center"
                                                              >
                                                                <img
                                                                  src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
                                                                  style="
                                                                    margin: 0;
                                                                    border: 0;
                                                                    padding: 0;
                                                                    display: block;
                                                                  "
                                                                  width="600px"
                                                                  height="300px"
                                                                  alt="Image"
                                                                />
                                                              </td>
                                                            </tr>

                                                            <tr>
                                                              <td
                                                                style="
                                                                  padding: 24px
                                                                    60px 0;
                                                                "
                                                              >
                                                                <table
                                                                  cellpadding="0"
                                                                  cellspacing="0"
                                                                  border="0"
                                                                  width="100%"
                                                                  style="
                                                                    text-align: left;
                                                                    font-size: 14px;
                                                                    background-color: #fafafa;
                                                                    border-radius: 6px;
                                                                    margin-bottom: 30px;
                                                                  "
                                                                >
                                                                  <tr>
                                                                    <th
                                                                      style="
                                                                        padding: 24px
                                                                          0 10px
                                                                          24px;
                                                                        text-align: left;
                                                                        font-size: 16px;
                                                                        color: #505050;
                                                                      "
                                                                    >
                                                                      Plum
                                                                      E-Gift
                                                                      Card
                                                                    </th>
                                                                    <td
                                                                      style="
                                                                        text-align: right;
                                                                        padding-right: 20x;
                                                                      "
                                                                    >
                                                                      <a
                                                                        href="https://docs.xoxoday.com/docs/getting-started-1"
                                                                        target="_blank"
                                                                        style="
                                                                          color: #c7417b;
                                                                          text-decoration: none;
                                                                          display: none;
                                                                        "
                                                                        >What is
                                                                        Plum?</a
                                                                      >
                                                                    </td>
                                                                  </tr>
                                                                  <tr
                                                                    style="
                                                                      box-shadow: 0px -1px
                                                                        0 0 #eaeaea;
                                                                    "
                                                                  >
                                                                    <td
                                                                      style="
                                                                        padding: 20px
                                                                          0 20px
                                                                          24px;
                                                                      "
                                                                    >
                                                                      <table
                                                                        cellpadding="0"
                                                                        cellspacing="0"
                                                                        border="0"
                                                                      >
                                                                        <tr>
                                                                          <td>
                                                                            <span
                                                                              style="
                                                                                color: #909090;
                                                                                font-size: 16px;
                                                                                margin: 0;
                                                                              "
                                                                              >Gift
                                                                              Card
                                                                              Code</span
                                                                            >
                                                                          </td>
                                                                        </tr>
                                                                        <tr>
                                                                          <td>
                                                                            <span
                                                                              style="
                                                                                color: #505050;
                                                                                font-size: 20px;
                                                                                margin: 6px
                                                                                  0
                                                                                  0
                                                                                  0;
                                                                                font-weight: 500;
                                                                                letter-spacing: 0.025rem;
                                                                              "
                                                                              >77m43dddb46b</span
                                                                            >
                                                                          </td>
                                                                        </tr>
                                                                      </table>
                                                                    </td>
                                                                  </tr>
                                                                </table>
                                                              </td>
                                                            </tr>
                                                          </table>
                                                        </td>
                                                      </tr>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                </table>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>```


  [1]: https://i.stack.imgur.com/tSwHz.png
  [2]: https://i.stack.imgur.com/zPdIM.jpg

Source: CSS – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *