溢出：隐藏在电子邮件中不起作用答案

【问题标题】：Overflow:hidden not working in email溢出：隐藏在电子邮件中不起作用
【发布时间】：2011-03-23 21:07:03
【问题描述】：

我正在尝试发送一些带有一些图片的电子邮件。如果我在网页上显示图像，它们是 100 倍宽和 100 像素高，但如果图像高于 100 像素，则会隐藏多余的像素。

如果我尝试通过电子邮件发送它，我无法让它剪裁图像的多余高度。
这是我在电子邮件中发送的内容：

<img  src="<?php echo base_url().$thumb;?>"  style="border:1px solid #35538d;width:100px;height:100px;overflow:hidden;text-align:center;background-color:#f0f0f0;" rel="nofollow" alt="Profile Photo">

【问题讨论】：

标签： css email overflow hidden

【解决方案1】：

您的电子邮件客户端很可能不支持您尝试的 CSS。电子邮件客户端通常支持大大减少的 HTML 子集，并且只支持最少的 CSS。在撰写 HTML 电子邮件时，通常是返璞归真... HTML 表格布局等，以获得最大的支持。

编辑： IMO 尝试 crop 使用 HTML/CSS 的图像将是不可能的，如果您希望它在所有电子邮件中工作客户。可能有助于实现此目的的相关属性：背景图像、高度、溢出、剪辑等只是不全面支持。所以，虽然它对某些人有用，但对其他人无效。

另一种方法可能是减小宽度，使高度始终为 100 像素。您需要计算服务器端的宽度以保持适当的纵横比。

但是，我认为最好的解决方案可能是使用 PHP 在服务器端生成（另一个）100 像素方形图像？

【讨论】：

好的，我已经在使用表格了，电子邮件很好，只是图像没有平方......
可能使用height属性而不是内联样式修复表格行/单元格的高度？虽然 Outlook 很可能是一个绊脚石。
@JEagle 不幸的是，在深入研究这一点时，恐怕我看不到您的问题的 HTML/CSS 解决方案。我已经更新了我的答案。
我明白了。我并没有试图让它适用于所有客户。感谢您的努力。

【解决方案2】：

您可能想查看Guide to CSS support in email clients 页面，了解您可以和不能将哪些 CSS 属性用于各种电子邮件客户端。

【讨论】：

【解决方案3】：

要完成这项工作，您需要创建一个方形对象（Div 或表格）并将图像放置在其中作为背景图像。如果您需要将图像作为链接，则需要在其上放置一个透明 gif。

【讨论】：

【解决方案4】：

针对 Alan O'Rourke 背景图片在 Outlook 电子邮件客户端中不受支持。此外，如果您尝试使用背景图片，请务必将其作为内联样式包含在内，因为 Gmail 会删除所有非内联 CSS。

【讨论】：