Outlook以原始大小顯示圖像

-1

我目前正在研究一些將在我的客戶Mailchimp中使用的自定義響應電子郵件模板。（是的，鬥爭是真實的..）通過一週我一直在試圖弄清楚爲什麼Outlook顯示我的圖像在他們的原始大小。Outlook以原始大小顯示圖像

正如你可以在我的代碼片段中看到的，我已經爲我的img，td和tr設置了一個寬度。也試圖將它添加到表中，沒有任何區別。因此，即使我已經設定好了，在Outlook中，圖像仍以原始大小顯示，這會導致佈局轉到sh * t。

<body bgcolor="#e8ebee"> 

<!-- wrapper table --> 
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee"> 
<tr> 
<td> 
    <!-- content1 --> 
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;"> 
     <tr> 
      <td bgcolor="#FFFFFF"> 
       <table> 
        <tr width="650" style="width:650px;"> 
         <td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650"> 
          <img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650"> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <!-- end content1 --> 
</td> 
</tr> 
</table> 
<!-- end wrapper table --> 
</body>

我也有一個石蕊帳戶，它顯示了當我使用預覽圖像時沒有錯誤。

如果我要使用大小爲我在屬性和樣式中定義的圖像，則沒有問題。但是，因爲這是一個使用Mailchimp的客戶端，我想要確保即使他上傳更大的圖像時，所有內容仍然保持原樣。

第二個問題是我使用了一些圖像作爲圖標，它們的尺寸是視網膜屏幕的兩倍。這裏是電子郵件的完整代碼jsfiddle而且它還應該是響應式的。所以圖像應該適合每個設備/屏幕。

有沒有人有一個想法或解決方案，讓我回到我的圖像在Outlook中的權力？我也願意忘記流暢的電子郵件，並且只有2個寬度用於移動電話，另一個用於桌面電腦。

哦，最後但並非最不重要的是，我做了谷歌它，我想我已經通過幾乎每個博客/文章有關過去一週的響應電子郵件設計。

在此先感謝您的幫助！

來源

2017-01-22 Kevincore

這將解決您的問題：

<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />

沒有顯示：塊;有時會發生圖像下方會出現1px的差距。

max-width：100％;防止您的圖像比您的容器大。寬度：100％是有用的，因爲圖像將獲得您的容器的寬度。

您應該將寬度屬性設置爲精確的寬度（以像素爲單位）。

我觀察到，如果我使用寬度屬性連同max-width：100％;那麼它將在基於Word的Outlook中正確呈現。沒有最大寬度，將應用原始寬度。（在基於Word的Outlook上。）

來源

2017-01-23 09:13:17

我希望現在好一點。 –

您好@ gyula.nemeth，非常感謝您的意見！不幸的是，我已經嘗試過了（在你的文章後也做過了），但仍然是我的圖片大於我允許的圖片大小，在Outlook中以全角顯示。 – Kevincore

我通常在容器表中定義內容的寬度。假設width =「600」。然後我添加width =「100％」到內部表格。我還將寬度=「100」添加到tds。如果我按照我提到的方式放置圖像，它們的大小是完美的。 –

Outlook使用MS Word渲染引擎，所以它會給你帶來問題。 Im Mailchimp你不僅可以做內聯樣式，還可以創建一個頭部CSS表，以及@media-screen響應規則。

至於展望而言，你應該增加兩件事到HTML電子郵件模板：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

這告訴郵件說「嘿，使用MS Office的架構在必要。

那麼這一切在你的頭CSS：

#outlook a{ 
     padding:0; 
    } 
    .ReadMsgBody{ 
     width:100%; 
    } 
    body{ 
     width:100% !important; 
     min-width:100%; 
     -webkit-text-size-adjust:100%; 
     -ms-text-size-adjust:100%; 
    } 
    .ExternalClass{ 
     width:100%; 
    } 
    .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{ 
     line-height:100%; 
    } 
    a img{ 
     border:none; 
    } 
    img{ 
     display:block; 
    }

的ExternalClass會幫助你的意思參考使用Microsoft渲染引擎秀觀。 Mailchimp有一個非常好的指南，關於這個可用的主題here。

祝你好運！

編輯：很多事情都會打破你的模板。我爲你開始了一個基本的Mailchimp模板並修復了一些問題。檢查片段。

Codepen

注意，這仍然沒有反應。因爲你沒有包含任何代碼來實現它。你想添加完整的身體樣式到你的表格，TD寬度和圖像。

來源

2017-01-23 17:08:08 scoopzilla

嘿@scoopzilla感謝您的幫助，非常有用的信息！我已經添加了上面但沒有任何區別。很遺憾，我的照片仍然以全尺寸顯示。但是我會把它保存在我的模板中，這可能會對一些客戶有所幫助。 – Kevincore

看看我在Codepen修改後的答案。如果您有更多的麻煩，請給我留言或標記我。我有一個完整大小的模板，您可以使用。 – scoopzilla

感謝您的codepen，我會盡快檢查它！但我確實需要它做出反應。你介意分享你的模板嗎？非常感謝您的幫助！非常感激。 – Kevincore

Outlook以原始大小顯示圖像

回答

相關問題