2

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

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

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

4

1 回答 1

1

我不知道object-fitOutlookobject-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>

于 2017-06-26T07:25:15.510 回答