无法调整表格大小以适合表格中的图像

Posted

技术标签:

【中文标题】无法调整表格大小以适合表格中的图像【英文标题】:Not able to resize table to fit image in table 【发布时间】:2019-05-08 22:14:39 【问题描述】:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <title>Mizona</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <meta property="og:title" content="My.Campaign-Meta-Title" /> 
    <meta property="og:description" content="My.Campaign-Meta-Description" /> 
    <meta property="og:image" content="My.Campaign-Meta-Image" /> 
    <meta name="description" content="My.Campaign-Meta-Description" /> 
    <meta name="keywords" content="My.Campaign-Meta-Keywords" /> 
    <meta name="twitter:card" content="summary_large_image" /> 
    <meta name="twitter:site" content="@eOriginal" /> 
    <meta name="twitter:creator" content="@eOriginal" /> 
    <meta name="twitter:title" content="My.Campaign-Meta-Title" /> 
    <meta name="twitter:description" content="My.Campaign-Meta-Description" /> 
    <meta name="twitter:image" content="My.Campaign-Meta-Image" /> 
    <style type="text/css">
      #logo img 
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: block;
      

      td 
        word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
      

      .desktop-only 
        display: block;
      

      .mobile-only 
        display: none;
      

      .no-spacing 
        margin: 0px;
        padding: 0px;
      

      img 
        max-width: 100%;
      

      #cover-img img 
        max-width: 100%;
        margin-bottom: 30px;
      

      #cover-content ul 
        padding-left: 15px;
      

      #socialicons img 
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: inline-block !important;
        border: none;
      
      #graphic img 
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        float: none !important;
        clear: both;
        display: inline-block !important;
      

      .pad-right-5 
        padding-right: 5px;
      

      .pad-right-10 
        padding-right: 10px;
      

      .pad-right-20 
        padding-right: 20px;
      

      .pad-top-10 
        padding-top: 10px;
      

      #content-middle a
        color: #0EABD6;
      
      
      .inner 
        padding: 10px 40px;
      
      
      .two-column 
        font-size: 0;
      
      
      .two-column .rcolumn 
        width: 100%;
        max-width: 300px;
        display: inline-block;
        vertical-align: top;
      
      
      .mobile-center 
        text-align: left !important;
      

      @media only screen and (max-width: 600px) 

        .pad-right-10 
          padding-right: 0px;
        

        .pad-right-20 
          padding-right: 0px;
        

        .desktop-only 
          display: none !important;
        
        
        .mobile-center 
          text-align: center !important;
        

        .mobile-only 
          display: block;
        

        #logo img 
          width: 100% !important;
        

        #logo-mobile img 
          width: 80% !important;
        
        #graphic img 
          width: 100% !important;
          height: auto !important;
        
        *[class].center 
          text-align:center !important;
          margin:0 auto !important;
        
        *[class].bottom-pad padding-bottom:35px !important;
        table[class="body"] table.columns td 
          width: auto !important;
        
        table[class="body"] table.column td .list 
          width: auto !important;
        
        table[class="body"] img 
          /*width: auto !important;*/
          height: auto !important;
          max-width: 100% !important;
        
        table[class="body"] center 
          min-width: 0 !important;
        
        table[class="body"] .container 
          width: 100% !important;
        
        table[class="body"] .row 
          width: 100% !important;
          display: block !important;
        
        table[class="body"] .wrapper 
          display: block !important;
          padding-right: 0 !important;
        
        table[class="body"] .columns 
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        
        table[class="body"] .column 
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        
        table[class="body"] .wrapper.first .columns 
          display: table !important;
        
        table[class="body"] .wrapper.first .column 
          display: table !important;
        
        table[class="body"] table.columns td 
          width: 100% !important;
        
        table[class="body"] table.column td 
          width: 100% !important;
        

        table[class="body"] .columns td 
          width: 100% !important;
          display: block;
        
        table[class="body"] .column td 
          width: 100% !important;
          display: block;
        

        table[class="body"] td.offset-by-one 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-two 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-three 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-four 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-five 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-six 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-seven 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-eight 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-nine 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-ten 
          padding-left: 0 !important;
        
        table[class="body"] td.offset-by-eleven 
          padding-left: 0 !important;
        
        table[class="body"] table.columns td.expander 
          width: 1px !important;
        
        table[class="body"] .right-text-pad 
          padding-left: 10px !important;
        
        table[class="body"] .text-pad-right 
          padding-left: 10px !important;
        
        table[class="body"] .left-text-pad 
          padding-right: 10px !important;
        
        table[class="body"] .text-pad-left 
          padding-right: 10px !important;
        
        table[class="body"] .hide-for-small 
          display: none !important;
        
        table[class="body"] .show-for-desktop 
          display: none !important;
        
        table[class="body"] .show-for-small 
          display: inherit !important;
        
        table[class="body"] .hide-for-desktop 
          display: inherit !important;
        

        .social-icon td img 
          width: 40px !important;
          height: 40px !important;
        
      
    </style> 
  </head> 
  <body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; "> 
    <table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"> 
      <tbody> 
        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
          <td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; "> 
            <center style="width:100%; min-width:580px; "> 
              <table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
                <tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                  <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top"> 
                    <table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                      <tbody> 
                        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                          <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                            <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "> 
                              <tbody> 
                                <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                  <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                                    <div class="mktEditable" id="logo" style="" mktoname="logo">
                                      <img src="http://info.eoriginal.com/rs/907-BBE-942/images/email header.jpg"  constrain="true" imagepreview="false" style="max-width: 600px;" />
                                    </div></td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr class="mktoModule" id="intro-with-image" mktoname="intro-with-image" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"> 
                  <td> 
                    <table cellpadding="0" cellspacing="0" border="0"> 
                      <tbody> 
                        <tr> 
                          <td  style="background-color:#ece9e2;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Season Greetings.jpg"  /></td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr class="mktoModule" id="padding" mktoname="padding" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"> 
                  <td style="padding: 10px 40px"> </td> 
                </tr>
                <tr class="mktoModule" id="text-benefits" mktoname="text-benefits" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"> 
                  <td style="padding: 0px 40px"> 
                    <table class="columns"> 
                      <tbody> 
                        <tr valign="top"> 
                          <td> 
                            <div class="mktEditable" id="cover-content" mktoname="cover-content">
                              <p style="font-family: Verdana, Arial; color: #353937; text-align: center;">lead.First Name:default=Hi,</p> 
                              <p style="font-family: Verdana, Arial; color: #353937; text-align: center;">It is our pleasure this holiday season to extend to you our warmest greetings and best wishes for a happy holiday and a prosperous new year.</p> 
                              <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/holidayphoto EDIT CROP.jpg"   style="display: block; margin-left: auto; margin-right: auto;" /></p> 
                              <p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Wishing you a season of joy and continued success into 2019.</p> 
                              <p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Sincerely,</p> 
                              <p style="font-family: Verdana, Arial; color: #353937; text-align: center;">The eOriginal Team</p>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr class="mktoModule" id="bottom-cta" mktoname="bottom-cta" style="vertical-align:top; padding:0;"> 
                  <td style="padding: 0px 40px;" align="center"> 
                    <table border="0" cellspacing="0" cellpadding="0"> 
                      <tbody> 
                        <tr> 
                          <td align="center"> 
                            <table border="0" cellspacing="0" cellpadding="0"> 
                              <tbody> 
                                <tr> 
                                  <td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"> 
                                    <div id="cta2" class="mktEditable" style="" mktoname="cta2">
                                      <p class="no-spacing" style="font-family: Verdana, Arial;"><a href="http://info.eoriginal.com/E-DEC-EMP-18_LP.html" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Click Here</a></p>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr class="mktoModule" id="padding-sm" mktoname="padding-sm" style="vertical-align:top; padding:0;"> 
                  <td style="padding: 10px 40px;" align="center"> 
                    <table border="0" cellspacing="0" cellpadding="0"> 
                      <tbody> 
                        <tr> 
                          <td align="center">&nbsp;</td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049"> 
                  <td class="two-column" style="font-size: 0; text-align: center;"> 
                    <!--[if (gte mso 9)|(IE)]>
                      <table >
                      <tr>
                      <td  valign="top">
                      <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table > 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                        </td><td  valign="top">
                        <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table > 
                        <tbody> 
                          <tr> 
                            <td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> 
                              <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                                <tbody> 
                                  <tr> 
                                    <td align="left" valign="middle" ><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img  src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; "   /></a></td> 
                                    <td align="left" valign="middle" ><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img  src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; "   /></a></td> 
                                    <td align="left" valign="middle" ><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img  src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;"   /></a></td> 
                                    <td align="left" valign="middle" ><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img  src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; "   /></a></td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                </tr>
                <tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937"> 
                  <td class="two-column" style="font-size: 0; text-align: center;"> 
                    <!--[if (gte mso 9)|(IE)]>
                      <table >
                      <tr>
                      <td  valign="top">
                      <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table > 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png"  /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                        </td><td  valign="top">
                        <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table > 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                </tr>
              </table> 
            </center></td> 
        </tr> 
      </tbody> 
    </table>  
  </body>
</html>

正如您从上面的代码中看到的那样,我得到了里面有图像的表格,但是表格在底部似乎有点大,导致它有一个细的灰色条。如何使图像适合桌子或桌子适合图像?我尝试了高度,但似乎没有用。我已将高度值添加到图像以适合表格大小,并且我还尝试添加高度值以适合图像大小,但它似乎不起作用。

【问题讨论】:

【参考方案1】:

问题的原因是line-height:19px;

【讨论】:

有多个line-height:19 px;你都删除了吗? 尝试将&lt;td style="padding: 10px 40px"&gt; &lt;/td&gt; 更改为&lt;td style="padding: 0px 40px"&gt; &lt;/td&gt; &lt;td width="600" style="background-color:#ece9e2;"&gt; 更改为&lt;td width="600"&gt;【参考方案2】:

将图像的高度和宽度更改为 100%,这将适合表格 div 内的图像

【讨论】:

以上是关于无法调整表格大小以适合表格中的图像的主要内容,如果未能解决你的问题,请参考以下文章

自定义表格单元格未调整大小以适合内容视图

表格视图单元格中的 UIImage 大小

图像在表格视图单元格中下载后调整大小

自调整大小表格单元格中的 ImageView 在应用 Aspect Fit 之前使用图像的高度

ios在表格视图单元格中视觉调整图像大小

WPF的窗口中的所有内容随窗口大小变化而同步变化