更新的简短问题：

对表格单元格内的图像应用最大宽度：

• max-width：50 PX只做一件事，按预期工作
• max-width：100%执行另一项操作，按预期工作
• max-width：max（50 PX，30 vw）也按预期工作
  *但是，最大宽度：max（50 PX，100%）执行完全不同且意想不到的操作

从@temani-afif的有用响应和链接中，我猜测父单元格看到其子单元格具有max-width：max（%，px），并且在计算其自身宽度时完全忽略图像，因为max（）函数中的百分比。在这样做时，图像和表格单元格分别确定其宽度，从而导致溢出。

• 本例中的表格单元格显示“I am 40 px wide”。
• 图像显示“最大值（100%，50 px）=最大值（40 px，50 px）= 50 px”→溢出

我不认为在这些限制下有什么办法可以解决这个问题。

原始问题：

我拥有一个可以修改Gmail的浏览器扩展程序，其中一部分就是为邮件和内嵌图片设置最大宽度。

.email-body {
  width: 800px;
}

.email-body img {
  max-width: 100%;
  height: auto;
  object-fit: scale-down;
}

这非常有效，它不仅可以防止大量内联图像比消息宽，而且还可以缩小表格中的图像，使表格不会超过消息正文的最大宽度。
但当表格单元格人为地变小时（HTML电子邮件中的HTML经常不好），这种情况就不存在了，在这种情况下，图像会被无意地缩小，有时会变得不可见。

示例：40像素TD中的100像素IMG

例如，下面的代码将导致图像缩小到10 px宽，并添加max-width:100%（100% =容器的宽度= 40 px）：

<table><tr>
  <td style="width:40px;">
    <img style="width:100px; max-width:100%;" />
  </td>
</tr></table>

第一次尝试：px不是最大宽度的%

好的，很容易修复。因为这是小图像最常见的问题，如果我使用像素值（50 px）作为最大宽度，它可以正常工作（图像是完整的100 px，TD增长以匹配）。

<table><tr>
  <td style="width:40px;">
    <img style="width:100px; max-width:50px;" />
  </td>
</tr></table>

但我不想总是使用50 px的最大宽度，我想让一个大的图像跨越整个电子邮件的宽度，而表格中的图像仍然保持其容器的宽度。

第二次尝试：最大宽度：最大值（像素，%）

我想使用100%，除非它小于某个固定宽度（比如50 px）。这应该很容易，对吗？img { max-width: max(50px, 100%); }

<table><tr>
  <td style="width:40px;">
    <img style="width:100px; max-width: max(50px, 100%);" />
  </td>
</tr></table>

**图像不再匹配单元格？**100%继承自容器（40 px）。因此，最大宽度实际上是max(50px, 40px)，50 px是较大的数字。图像大小正确，为50 px宽，但单元格这次没有扩展超过40 px，导致溢出并与下一个TD中的内容重叠。

"有什么想法吗"
您可以在这里使用代码：https://jsfiddle.net/leggett/rqp5uko1/2/