Question

我正在尝试创建将在Outlook中使用的自定义电子邮件签名。

我创建的HTML在桌面Outlook客户端上运行良好，但是在移动客户端上，图像无法响应地调整大小/缩放。

我的HTML代码如下

<meta name="viewport" content="width=device-width">
<html>
   <head>
   </head>
   <style>       
   </style>
   <body style="width:100%;max-width:630px !important; max-height:240px !important ;font-family: Verdana,Helvetica,sans-serif;">
      <div style="max-width:100%;">
         <table>
            <tbody>
               <tr>
                  <td style="overflow:hidden; white-space:nowrap"> <img style="max-width: 150px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/logo_lrg.png"> </td>
                  <td>
                     <table style="width: 430px;table-layout: fixed;">
                        <tbody>
                           <tr>
                              <td style="overflow:hidden; white-space:nowrap"> <span style="font-size: 0.8em;" style="color: rgb(0,92,171);"><big><strong>Full Name</strong></big></span> </td>
                           </tr>
                           <tr>
                              <td style="overflow:hidden; white-space:nowrap"> <span style="font-size: 0.8em;">Designation</span> </td>
                           </tr>
                           <tr> </tr>
                           <tr></tr>
                           <tr> 
                           <tr>
                              <td style="overflow:hidden; white-space:nowrap"><span style="font-size: 0.8em;">Location</span></td>
                           </tr>
                           <tr>
                              <td style="white-space: nowrap;"> <span style="font-size: 0.8em;">T:+00 00 0000 0000 | M:+00 00000 00000</span> </td>
                           </tr>
                           <tr>
                              <td style="overflow:hidden; white-space:nowrap">
                                 <div style="margin-top: 5px;padding-top: 5px;border-top-color: lightgray;border-top-style: dotted;"> <a href="http://www.example.com" target="_blank"><img style="max-width:100%; max-width: 104px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/logo_sml.png"></a> <a href="https://www.facebook.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;"  src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/fb.png"></a> <a href="https://twitter.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;"   src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/twitter.png"></a> <a href="https://in.linkedin.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;"  src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/linkedIn.png"></a> </div>
                              <td>
                           </tr>
                        </tbody>
                     </table>
                  </td>
               </tr>
            </tbody>
         </table>
         <img style="width:100%;max-width: 630px !important;" src='http://qsign.000webhostapp.com/QSign_test/assets/imgs/campaign/kyr.png'>
      </div>
   </body>
</html>

http://qsign.000webhostapp.com/QSign_test/index.html

如果我不能使用媒体查询，如何在移动屏幕上按比例制作图像或整个签名比例。

电子邮件签名CSS图像响应问题

0 个答案: