无JavaScript时如何使表格单元格图片高度匹配相邻单元格

这是一张高分辨率图片，当前通过为图片设置max-width: 100%进行缩小显示。

我曾尝试为#featured设置display: flex，为#featured img设置display: block，但问题仍未解决。

期望实现的效果是：让图片高度与#condition单元格一致，若图片宽度未填满单元格则水平居中。

我需要图片默认能打印到实体纸张上（无需用户修改打印机设置），因此background-image方案不可行。

目标平台不支持JavaScript，只能使用HTML和CSS。由于该平台对表格布局支持良好，对现代<div>布局支持较差，因此我更倾向于保留嵌套表格布局。

当前代码 #

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-style: none;
  width: 100%;
}

#featured {
  padding: 2% 1% 2% 2%;
  text-align: center;
  width: 47%;
}

#featured img {
  border: 0.5em solid red;
  max-width: 100%;
}

#condition {
  padding: 2% 2% 2% 1%;
  vertical-align: top;
  width: 47%;
}

#condition table {
  border: 1px solid #000;
}

#condition td {
  border: 1px solid #000;
  padding: 0.5em;
}

#product {
  text-align: center;
}

HTML

<table>
  <tr>
    <td id="featured">
      <a target="_blank" href="https://i.imgur.com/sNc50nG_d.webp?maxwidth=1520&fidelity=grand">
        <img src="https://i.imgur.com/sNc50nG_d.webp?maxwidth=1520&fidelity=grand" alt="">
      </a>
    </td>
    <td id="condition">
      <table>
        <tr>
          <th>Category</th>
          <th>Condition</th>
        </tr>
        <tr>
          <td>Overall</td>
          <td>Excellent</td>
        </tr>
        <tr>
          <td>Box</td>
          <td>Excellent</td>
        </tr>
        <tr>
          <td>Game</td>
          <td>Excellent</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td id="product" colspan="2">{Product ID}</td>
  </tr>
</table>

通过以下CSS调整即可实现需求：

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-style: none;
  width: 100%;
}

#featured {
  padding: 2% 1% 2% 2%;
  text-align: center;
  width: 47%;
  height: 100%; /* 让单元格高度匹配右侧表格所在单元格 */
}

#featured a {
  display: block; /* 让链接填满单元格高度，作为图片的参照容器 */
  height: 100%;
}

#featured img {
  border: 0.5em solid red;
  max-width: 100%;
  max-height: 100%; /* 限制图片最大高度不超过容器 */
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
  margin: auto; /* 未填满宽度时水平居中 */
}

#condition {
  padding: 2% 2% 2% 1%;
  vertical-align: top;
  width: 47%;
}

#condition table {
  border: 1px solid #000;
}

#condition td {
  border: 1px solid #000;
  padding: 0.5em;
}

#product {
  text-align: center;
}

关键调整说明 #

• #featured设置height: 100%，确保单元格高度与右侧表格所在单元格一致；
• 给<a>标签设置块级显示并填满高度，让图片的max-height能正确参照单元格高度；
• max-height: 100%直接限制图片高度不超过容器；
• object-fit: contain保证图片在尺寸限制内保留原有比例；
• margin: auto实现图片未填满宽度时的水平居中。

该方案完全基于HTML和CSS，不依赖JavaScript，且图片为<img>标签可正常打印，保留了原有的表格布局，符合所有需求。

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