如何将图片尺寸限制为文本长度决定的表格单元格宽度

这个需求很好实现，不管你用表格还是div布局，仅靠HTML+CSS就能搞定，核心就是让图片继承容器的宽度，同时保持比例，不会撑开原本由文本定义的尺寸。下面给你两种具体方案：

表格实现方案 #

你的原始表格结构可以保留，只需要给图片添加几行CSS样式，就能让它完美适配文本行定义的单元格宽度：

<table style="border-collapse: collapse;">
  <tr>
    <td>Text defining the width of the table</td>
  </tr>
  <tr>
    <td>
      <img 
        src="some_picture.jpg" 
        style="width: 100%; height: auto; display: block;"
      >
    </td>
  </tr>
</table>

样式说明： #

• width: 100%：强制图片宽度和单元格完全一致，不会超出文本定义的表格宽度
• height: auto：自动计算高度，保持图片的原始比例，避免拉伸变形
• display: block：去掉图片默认的底部空白间隙，让布局更规整
• border-collapse: collapse：确保表格没有多余边框，符合你的需求

Div替代方案 #

如果不想用表格，用div布局会更轻量化，效果完全一样：

<div style="display: inline-block;">
  <div>Text defining the width of the table</div>
  <div>
    <img 
      src="some_picture.jpg" 
      style="width: 100%; height: auto; display: block;"
    >
  </div>
</div>

布局说明： #

• 外层div用display: inline-block，它的宽度会自动由内部的文本内容决定（和表格的自动宽度逻辑一致）
• 图片同样设置width: 100%，就会自动适配外层div的宽度，不会改变整体布局尺寸

这两种方案都不需要JavaScript，纯HTML+CSS就能实现，完全满足你的要求~

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