Пейзаж / портретные изображения в электронной почте

Question

Я пишу письмо через Ruby on Rails а также MJML рамки, и есть разные изображения, которые я хочу включить в него. В настоящее время изображения размещены на S3, и мы поставляем их в HTML. Некоторые из них являются пейзажными, а некоторые - портретными, и поэтому должны быть обрезаны и центрированы, чтобы иметь одинаковый размер.

Если бы я был в обычной веб-среде, я бы решил ее с помощью обычных методов CSS (background-image атрибуты). Но я также хочу, чтобы электронная почта была совместима с Outlook (по крайней мере, с последней версией), с которой метод, о котором я упоминал , не совместим.

Сейчас я рассматриваю возможность загрузки изображений, а затем реализации логики кадрирования с использованием этого драгоценного камня и добавления их в качестве вложения. Но я был бы рад узнать о любой другой альтернативе.

Answer 1

Я не знаю, если object-fit а также object-position поддерживаются в Outlook. Я знаю, что они не в 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>