如何让表格前4个单元格内图片占满父单元格高度？

要实现前4个单元格内的图片占满父单元格高度，第5个单元格保持原有样式，你可以按以下方式修改代码：

修改后的完整代码 #

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black; height: 100%;">
        <img src="https://picsum.photos/200/300" style="height: 100%; width: auto;">
      </td>
      <td style="border: 1px solid black; height: 100%;">
        <img src="https://picsum.photos/200/300" style="height: 100%; width: auto;">
      </td>
      <td style="border: 1px solid black; height: 100%;">
        <img src="https://picsum.photos/200/300" style="height: 100%; width: auto;">
      </td>
      <td style="border: 1px solid black; height: 100%;">
        <img src="https://picsum.photos/200/300" style="height: 100%; width: auto;">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
      </td>
    </tr>
  </table>
</div>

关键修改说明 #

• 移除前4张图片的固定width和height属性，避免固定尺寸限制图片适配
• 给前4张图片添加行内样式height: 100%; width: auto;：强制图片高度填满所在单元格，宽度自动按原比例缩放，防止图片变形
• 给前4个单元格添加height: 100%;：确保单元格高度继承表格行的高度（行高由第5个单元格的内容高度决定）

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