如何实现网页表格添加图片后尺寸不变且图片自适应td？

嘿，我来帮你搞定这个需求！要实现添加图片后表格宽高不变化，同时图片自动适配td的大小，核心是给图片设置自适应缩放的CSS样式，同时确保td的尺寸是固定的（你已经给td设了宽度比例，这很好）。

具体实现步骤： #

• 给<img>标签添加内联样式，让它自动缩放以适配td的宽高，同时保持图片比例：

  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  

• 如果需要固定td的高度，可以给对应的td加上height属性（比如style="width:34%; height: 150px;"），这样图片会严格适配这个尺寸范围。

修改后的完整代码： #

<table style="width:100%" border="1">
  <tr>
    <td style="width:34%"><!--右侧-->
      <table border="1" style="width:100%">
        <tr>
          <!--符号-->
          <td>
            <i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
          </td>
          <!--名称-->
          <td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
          <!--logo-->
          <td></td>
        </tr>
      </table>
    </td>
    <td style="width:32%" rowspan="8"><!--中间-->
    </td>
    <td style="width:34%"><!--左侧-->
      <table border="1" style="width:100%">
        <tr>
          <!--logo-->
          <td></td>
          <!--名称-->
          <td style="text-align:center">
            <!-- 这里给img添加了自适应样式 -->
            <img src="images/company/integrity.png" style="max-width:100%; max-height:100%; width:auto; height:auto;" />
          </td>
          <!--符号-->
          <td style="text-align:left">
            <i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

额外说明： #

• 如果你的表格需要更严格的尺寸控制，可以把内联样式抽出来写成CSS类，比如：

  .fit-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
  

  然后给img标签加class="fit-img"即可，这样更便于维护。
• 要是td的高度由其他内容决定（比如旁边的字体大小），图片会自动适配td的现有高度，不会把td撑大。

内容的提问来源于stack exchange，提问作者Maxim Baran