Вопросы Теги

HTML настроить изображение в подписи электронной почты

  1. Щелкните правой кнопкой мыши по проекту в пределах отказавшего решения.
  2. Unload Project
  3. Обновить проект
  4. Build Project
  5. Восстановить решение
0
задан JGreatorex 15 January 2019 в 16:55
поделиться

3 ответа

Я уверен, что это потому, что изображение находится в той же строке, что и контактная информация. Я думаю, что добавление изображения в строку с компанией и ролью (между вторыми <tr> тегами) решит это.

0
ответ дан Bassie-c 15 January 2019 в 16:55
поделиться

Это будет работать согласованно для большинства почтовых клиентов, включая Outlook и Gmail. 

<table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
  <tr>
   <td style="padding: 0px;">
     <img src="https://uploaddeimagens.com.br/images/001/834/894/original/pic.png?1547564265" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" />
   </td>
 </tr>
</table>
<table role="contentinfo" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
  <tr>
   <td valign="top" style="padding: 10px;">
   <p style="font-size: 14px; font-family: Arial, sans-serif; color: #464646; margin: 0;">
   <strong>Company</strong><br />
   <strong>Role</strong><br /><br />
  
   <strong>E-mail:</strong> <a href="mailto: aaa@gmail.com" target="_blank" style="color: #000000; text-decoration: none;">aaa@gmail.com</a><br />
   <strong>Phone:</strong> <span class="color: #000000; text-decoration: none;">1231231231</span>
   <strong>| Phone:</strong> <span class="color: #000000; text-decoration: none;">2222123123</span><br />
   <strong>Fax:</strong> <span class="color: #000000; text-decoration: none;">00010102301</span><br /><br />

   <img src="https://img.icons8.com/color/50/000000/domain.png" width="30" height="30" border="1" style="display: inline-block;" /	>
   <img src="https://img.icons8.com/color/50/000000/facebook.png" width="30" height="30" border="1" style="display: inline-block;" />
  </p>
</td>
<td valign="top" style="padding: 10px 0;">
  <img src="https://via.placeholder.com/100x100" width="100" style="height: auto; display: block; margin: 0;" />
</td>
  </tr>
</table>
<table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
  <tr>
   <td style="padding: 0px;">
   <img src="https://uploaddeimagens.com.br/images/001/834/900/original/pic-2.png?1547564365" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" />
   </td>
  </tr>
</table>

Удачи.

0
ответ дан gwally 15 January 2019 в 16:55
поделиться

Мне нравится использовать Drag / Drop Editor «response-email-builder» и получать с ним хорошие результаты. Вы можете самостоятельно принять его или использовать бесплатно на unlayer.com -> Демо Строителя .

Github response-email-builder

Вот пересмотренная версия вашего сниппета от Reaction-email-builder (должна работать во всех почтовых клиентах): 

<!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

    <head>
      <title></title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="x-apple-disable-message-reformatting">
      <style type="text/css">
        #outlook a {
          padding: 0;
        }
        
        .ReadMsgBody {
          width: 100%;
        }
        
        .ExternalClass {
          width: 100%;
        }
        
        .ExternalClass * {
          line-height: 100%;
        }
        
        body {
          margin: 0;
          padding: 0;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
        }
        
        table,
        td {
          border-collapse: collapse;
          mso-table-lspace: 0pt;
          mso-table-rspace: 0pt;
        }
        
        img {
          border: 0;
          height: auto;
          line-height: 100%;
          outline: none;
          text-decoration: none;
          -ms-interpolation-mode: bicubic;
        }
        
        p,
        ul {
          display: block;
          margin: 0;
        }
        
        @media only screen and (min-width: 480px) {
          .email-col-17 {
            width: 17% !important;
          }
          .email-col-25 {
            width: 25% !important;
          }
          .email-col-33 {
            width: 33% !important;
          }
          .email-col-50 {
            width: 50% !important;
          }
          .email-col-67 {
            width: 67% !important;
          }
          .email-col-100 {
            width: 100% !important;
          }
        }
        
        @media only screen and (max-width: 480px) {
          img.fullwidth {
            max-width: 100% !important;
          }
          .no-stack .email-col-17 {
            width: 17% !important;
          }
          .no-stack .email-col-25 {
            width: 25% !important;
          }
          .no-stack .email-col-33 {
            width: 33% !important;
          }
          .no-stack .email-col-50 {
            width: 50% !important;
          }
          .no-stack .email-col-67 {
            width: 67% !important;
          }
          .no-stack .email-col-100 {
            width: 100% !important;
          }
        }
      </style>

      <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
      <!--[if mso]>
    <style type="text/css">
      ul li {
        list-style:disc inside;
        mso-special-format:bullet;
      }
    </style>
    <![endif]-->
      <!--[if lte mso 11]>
    <style type="text/css">
      .outlook-group-fix {
        width:100% !important;
      }
    </style>
    <![endif]-->

    </head>

    <body id="u_body" class="u_body" width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly; background-color: #ffffff;">
      <div style="background-color: #ffffff; font-family: arial,helvetica,sans-serif;">

        <table id="u_row_3" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0">
          <tr>
            <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;">
              <!--[if mso | IE]>
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
          <![endif]-->
              <div style="margin:0px auto;max-width:430px;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
                  <tbody>
                    <tr>
                      <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor="">
                        <!--[if mso | IE]>
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:430px;">
      <![endif]-->
                        <div id="u_column_4" class="email-col-100 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">

                          <table id="u_content_image_1" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left">

                                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                      <td style="padding-right: 0px; padding-left: 0px;" align="center">

                                        <img align="center" border="0" src="https://unroll-images-production.s3.amazonaws.com/projects/1958/1547577556027-pic.png" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 430px;"
                                          width="430">

                                      </td>
                                    </tr>
                                  </table>

                                </td>
                              </tr>
                            </tbody>
                          </table>

                        </div>
                        <!--[if mso | IE]>
      </td>
    </tr></table>
                    <![endif]-->
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
          </td></tr></table>
          <![endif]-->
            </td>
          </tr>
        </table>

        <table id="u_row_2" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0">
          <tr>
            <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;">
              <!--[if mso | IE]>
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
          <![endif]-->
              <div style="margin:0px auto;max-width:430px;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
                  <tbody>
                    <tr>
                      <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor="">
                        <!--[if mso | IE]>
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:287px;">
      <![endif]-->
                        <div id="u_column_2" class="email-col-67 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">

                          <table id="u_content_text_2" class="u_content_text" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="overflow-wrap: break-word;padding:11px 0px 0px;font-family:arial,helvetica,sans-serif;" align="left">

                                  <div style="color: #000; line-height: 140%; text-align: left; word-wrap: break-word;">
                                    <p style="line-height: 140%; font-size: 14px;"><span style="font-size: 18px; line-height: 25.2px;"><strong>Company</strong></span></p>
                                    <p style="line-height: 140%; font-size: 14px;">Role</p>
                                    <p style="line-height: 140%; font-size: 14px;">&nbsp;</p>
                                    <p style="line-height: 140%; font-size: 14px;"><strong>E-mail:</strong> <a href="mailto:aaa@gmail.com">aaa@gmail.com</a><br /><strong>Phone:</strong> 1231231231 | <strong>Phone:</strong> 2222123123<br /><strong>Fax:</strong> 00010102301</p>
                                  </div>

                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <table id="u_content_html_1" class="u_content_html" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left">

                                  <div>
                                    <img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/domain.png"><img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/facebook.png"><br/>
                                  </div>

                                </td>
                              </tr>
                            </tbody>
                          </table>

                        </div>
                        <!--[if mso | IE]>
      </td>
    <td style="vertical-align:top;width:143px;">
      <![endif]-->
                        <div id="u_column_3" class="email-col-33 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">

                          <table id="u_content_image_3" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="overflow-wrap: break-word;padding:20px 10px 10px;font-family:arial,helvetica,sans-serif;" align="left">

                                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                      <td style="padding-right: 0px; padding-left: 0px;" align="right">

                                        <img align="right" border="0" src="https://via.placeholder.com/100x100" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 100px;"
                                          width="100">

                                      </td>
                                    </tr>
                                  </table>

                                </td>
                              </tr>
                            </tbody>
                          </table>

                        </div>
                        <!--[if mso | IE]>
      </td>
    </tr></table>
                    <![endif]-->
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
          </td></tr></table>
          <![endif]-->
            </td>
          </tr>
        </table>

        <table id="u_row_4" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0">
          <tr>
            <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;">
              <!--[if mso | IE]>
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
          <![endif]-->
              <div style="margin:0px auto;max-width:430px;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
                  <tbody>
                    <tr>
                      <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor="">
                        <!--[if mso | IE]>
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:430px;">
      <![endif]-->
                        <div id="u_column_5" class="email-col-100 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">

                          <table id="u_content_image_2" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left">

                                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                      <td style="padding-right: 0px; padding-left: 0px;" align="center">

                                        <img align="center" border="0" src="https://unroll-images-production.s3.amazonaws.com/projects/1958/1547577562813-pic-2.png" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 430px;"
                                          width="430">

                                      </td>
                                    </tr>
                                  </table>

                                </td>
                              </tr>
                            </tbody>
                          </table>

                        </div>
                        <!--[if mso | IE]>
      </td>
    </tr></table>
                    <![endif]-->
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
          </td></tr></table>
          <![endif]-->
            </td>
          </tr>
        </table>

      </div>
    </body>

    </html>

0
ответ дан ArtCore7 15 January 2019 в 16:55
поделиться