將水平滾動條應用於電子郵件中的寬圖像

我目前在出站電子郵件中生成圖像可視化。我堅持從here讀取的550 - 600像素電子郵件寬度標準。我有一些可視化的表格，在某些時候，它們可以有10列以上，如果我想顯示所有內容，它需要超過600像素。將水平滾動條應用於電子郵件中的寬圖像

我想要尊重600像素的寬度，我想知道是否可以擁有1200像素的圖像，但它包含在600像素的寬度中，並具有水平滾動條，因此圖像尊重600寬度規則，但它們仍然可以水平滾動以顯示整個寬度。

我真的沒有太多的代碼，但是這是我的電子郵件中使用內聯樣式，我用硬編碼的寬度：

style="position: relative; height: 600px; width: 600px;"

來源

2017-01-24 theGreenCabbage

添加overflow屬性

style="position: relative; height: 600px; width: 600px;overflow-x:scroll"

如果僅當圖像寬度大於600像素時才需要顯示水平滾動條，請將overflow-x屬性設置爲auto。如果您需要水平和垂直滾動條，請使用overflow屬性。

來源

2017-01-24 01:23:47 acesmndr

如果圖像是特定寬度，即大於600像素，您可以設置一個屬性嗎？ – theGreenCabbage

嘗試overflow-x：auto; – acesmndr

@theGreenCabbage如果你把圖片包裝在一個div元素中並給這個元素一個固定的寬度/高度，你所要做的就是設置'overflow：auto;' – icecub

支持overflow CSS屬性is not great in email clients。如果您的列表中有很多iOS，Apple Mail和Webmail人員，則可以使用<div>上的overflow財產逃避<table>。

<div style="overflow-x: auto;"> 
    <table> 
     <!-- Your data --> 
    </table> 
</div>

但這不適用於Outlook，Android等。

另一種選擇：您能夠顯示在電子郵件中的鏈接一個縮小圖像在瀏覽器中的全分辨率的版本？

<a href="link-to-full-res.png"> 
    <img src="" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto;"> 
</a>

該圖像在電子郵件中可能不是100％易讀，但佈局不會中斷，體驗應該很好。

來源

2017-01-24 13:52:37

將水平滾動條應用於電子郵件中的寬圖像

回答

相關問題