電子郵件中的風景/肖像圖像

我正在通過Ruby on Rails和MJML框架編寫電子郵件，並且我想要包含它的不同圖像。目前這些圖像是在S3上託管的，我們將它們以HTML格式進行採集。其中一些是風景和一些肖像，因此應裁剪和居中以具有相同的大小。電子郵件中的風景/肖像圖像

如果我在一個普通的網絡環境中，我會使用常規的css methods（background-image屬性）來解決它。但我也希望電子郵件與Outlook（至少最後一個版本）兼容，我提到的方法是isn't compatible with。

現在我正在考慮下載圖像，然後使用this gem實現作物邏輯和其添加爲一個附件。但我很樂意知道任何其他的選擇。

來源

2017-06-26 serj

是什麼尺寸？ –

他們有不同的尺寸，但我只想從中心剪下大約150X150 – serj

我已經用我已經完成的寶石解決了它。 – serj

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

來源

2017-06-26 07:25:15

它看起來像是最好的解決方案，但是這些屬性與懷疑不兼容。電子郵件客戶端處於大約8年前的瀏覽器狀態。 – serj

電子郵件中的風景/肖像圖像

回答

相關問題