在不使用 div 的情况下在 html 中裁剪图像

Posted 2023-02-25

【中文标题】在不使用 div 的情况下在 html 中裁剪图像

【英文标题】：Cropping image in html without using div

【发布时间】：2015-06-18 20:41:09

【问题描述】：

我正在处理电子邮件集成。我知道 div 标签在各种平台（一些 Outlook 版本、一些网络邮件等）上都没有得到很好的解释。

我的问题：我想裁剪未知尺寸的图像......不使用 div 标签（所以使用表格......）！你觉得有可能吗？

谢谢！ 史蒂夫

【问题讨论】：

为什么不尝试在特定单元格上放置背景图像？

【参考方案1】：

在 html 电子邮件中裁剪图像并不能保证有效。最接近的方法是用作背景图像，容器声明的宽度/高度小于实际大小。问题是一些客户端可能不仅会忽略这一点并显示全尺寸，而且其他客户端可能会扭曲图像以适应列出的容器的大小。

最好的办法是事先手动将其裁剪为正确的大小，并假设 HTML/CSS 调整大小不起作用（感谢 Outlook），但我知道有时使用自动模板这不是一个选项。您在寻找解决方案时的另一个选择是使用this CSS guide 和测试网站（如 Acid 上的电子邮件）进行反复试验。使用从您过去的电子邮件中收集的数据，我会找到您最受欢迎的电子邮件客户端和设备，并尝试将其最大化。您可能还必须愿意向一小部分受众提供损坏的电子邮件。

【参考方案2】：

因为这个问题是针对电子邮件的。没有办法跨电子邮件客户端执行此操作，除非您只支持像 Apple Mail 这样的客户端，这当然不是一个好主意。

Outlook 桌面客户端将忽略图像上的任何大小调整并显示其实际大小。我认为 Outlook.com 也这样做。

如果您要提取未知图像，这封电子邮件是由脚本还是 RSS 生成的？如果是这样，可能有一些方法可以在图像到达电子邮件之前使用 php 或其他支持图像处理的语言来调整图像。但这超出了这个问题的范围。

归根结底，在 HTML 电子邮件中无法做到这一点。就像其他人说的那样，如果可以的话，只需将图像裁剪成您需要的大小，然后再将其放入电子邮件中。