更新的简短问题:
对表格单元格内的图像应用最大宽度:
- 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/
1条答案
按热度按时间b5buobof1#
关于这种逻辑行为的解释有点棘手,但要修复它,您可以考虑如下
min-width
: