Question

我在一张桌子上有一张图片，但是桌子似乎比这张图片要高。如何使图像高度和工作台高度相同？我的代码如下：

<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">
                  <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/greeting_header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
                </div></td> 
            </tr> 
          </tbody> 
        </table> 

      </td> 
    </tr> 
  </tbody> 
</table>

我希望图像高度和工作台高度相同，以便没有多余的间距。

Answer 1

请尝试使用此CSS

img{display:block}
p{margin:0 !important;}

<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">
                                      <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/greeting_header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
                                    </div></td> 
                                </tr> 
                              </tbody> 
                            </table> 

                          </td> 
                        </tr> 
                      </tbody> 
                    </table>

Answer 2

尝试在线设置高度。您的img被p

包裹

Answer 3

如果将图像宽度设置为100％，并且仅固定表格的td大小，则图像和表格大小可以相同。

<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">
                  <p><img src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302" alt="eO Logo White.png" constrain="true" imagepreview="false" style="width:100%" /></p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

如何将表TR精确设置为图像

3 个答案: