自动将图像调整为最大 TD 尺寸

Question

我正在尝试解决 SharePoint 中的一个限制，该限制在其布局中只能包含 3 列，而我需要四列。因此，我创建了一个 2 列的布局，并在每个单元格中添加了一个 table，就像这样。我希望图像完全适合 TD。如果您查看“努力 1”前面的图像，它会调整大小以适应可用高度。我希望它完全适合单元格（就像在“努力 3”前面的空单元格中）。

看起来它正在采用单元格 2 的当前高度并适合相同的大小。但是，最大尺寸应该是“Effort 3”前面的空单元格，我希望图像完全适合它（就像最后一张图像）。

<table style="width:100%;border:0;table-layout:fixed;word-wrap:break-word;border-collapse:collapse;" width="100 %">
    <tbody>
         <tr>
        <td width="100 %">
        <img align="center" width="100 %" src="/url/EmbeddedImage160142.jpg">
        </td>
        <td width="100 %"><h3>Effort 1</h3><p>A description of an effort and why it matters  </p>
        </td>
     </tr>
   </tbody>
  </table>

I tried various syntaxes. but the problem I have is that the image does not automatically resize to

Answer 1

更正了代码中的一些错误，这就是解决方案。

<table style="width:100%;border:0;table-layout:fixed;word-wrap:break-word;border-collapse:collapse;" width="100 %">
    <tbody>
         <tr>
        <td width="50%">
            <img style="display:block; width:100%;" src="https://placeimg.com/100/100/any">
        </td>
        <td width="50%" style="vertical-align:top"><h3>Effort 1</h3><p>A description of an effort and why it matters  </p>
        </td>
     </tr>
   </tbody>
  </table>

自动将图像调整为最大 TD 尺寸

Automatic size image to max TD size

html

css

sharepoint

html-table