表格单元格内图片用max(px,100%)时宽度不匹配问题排查

简化后的问题 #

为表格单元格内的图片设置max-width时出现异常：

• max-width:50px 符合预期
• max-width:100% 符合预期
• max-width:max(50px,30vw) 符合预期
• 但max-width:max(50px,100%) 出现完全不符合预期的结果

结合分析推测：父单元格因max()函数中的百分比，计算自身宽度时忽略图片，导致图片与单元格各自计算宽度引发溢出：

• 示例中单元格宽度为40px
• 图片计算得max(100%,50px)=max(40px,50px)=50px，最终溢出

当前暂无解决思路。

原问题背景 #

开发一款修改Gmail的浏览器扩展，需为邮件内容和行内图片设置max-width：

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

该设置可防止大图超出邮件宽度，也能缩小表格内图片避免表格超宽，但遇到HTML邮件中单元格被人为设为过小（如40px）时，图片会被意外缩小甚至不可见。

示例：40px TD中的100px IMG #

如下代码中，添加max-width:100%后图片会被缩小至40px：

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

尝试1：用像素值设max-width #

将max-width设为50px时，图片显示为100px且TD会自适应宽度，效果正常，但无法满足大图占满邮件宽度的需求。

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

尝试2：max-width: max(px, %) #

期望当100%小于50px时用50px，否则用100%，即设置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%继承容器40px，max-width实际为max(50px,40px)=50px，图片显示为50px但单元格仍为40px，导致溢出并与相邻TD内容重叠。

求解决方案？

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