电子邮件中的横向/纵向图像

Question

我正在通过Ruby on Rails 和MJML 框架写一封电子邮件，并且我想要包含不同的图像。目前，图像托管在 S3 上，我们在 HTML 中获取它们。其中有些是横向，有些是portrait，因此应裁剪并居中以具有相同的大小。

如果我在常规的 Web 环境中，我会使用常规的 css methods（background-image 属性）来解决它。但我也希望电子邮件与 Outlook（至少是最新版本）兼容，我提到的方法是 isn't compatible with。

现在我正在考虑下载图像，然后使用this gem 实现裁剪逻辑并将它们添加为附件。但我很高兴知道任何其他选择。

Answer 1

我不知道 Outlook 是否支持 object-fit 和 object-position。我知道 它们不在 IE 和 Edge 中。

如果支持，您可以尝试。

右键单击每个标题并在新选项卡中打开以查看实际图像

.image-parent {
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.image-parent>img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

<a href="http://i.share.pho.to/18d84aae_o.jpeg">Landscape</a>
<div class="image-parent">
  <img src="http://i.share.pho.to/18d84aae_o.jpeg">
</div>
<a href="http://i.share.pho.to/eb321087_o.jpeg">portrait</a>
<div class="image-parent">
  <img src="http://i.share.pho.to/eb321087_o.jpeg">
</div>
<a href="http://i.share.pho.to/57896478_o.jpeg">square</a>
<div class="image-parent">
  <img src="http://i.share.pho.to/57896478_o.jpeg">
</div>