如何在HTML電子郵件中響應圖像而不管圖像大小

我正在創建一個電子郵件模板，其中我的容器的最大寬度爲600px。我希望能夠上傳超過800像素寬的圖像，並縮小圖像以保持其預期的高寬比。所以即使我上傳了一張800像素寬的圖片，它也會縮放到600像素。如何在HTML電子郵件中響應圖像而不管圖像大小

在Outlook中，我不認爲它支持最大寬度的圖像，因此導致它拉伸。

有沒有解決方案？

來源

2015-04-01 Raj Chudasama

當我添加一個540像素的圖像時，它會響應，但是如果我上傳另一個圖像，比其上的圖片寬1000px，它看起來沒問題，但是當我發送測試郵件到我的Outlook 2010時，圖像延伸到原來的大小，導致電子郵件與它一起伸展。 – 2015-04-01 13:52:20

嘗試看看這[主要]（https://gist.github.com/elidickinson/5525752） – 2015-04-01 14:11:53

並可能這[link]（http://stackoverflow.com/questions/2426072/is-there-an-相當於css-max-width-that-works-in-html-emails）可能對你也有幫助 – 2015-04-01 14:14:20

是的，沒有。無論您的CSS和HTML大小如何，Outlook都傾向於將圖像強制爲實際大小。因此，使用比您想要在桌面版上顯示的圖片更大的圖片可能會在Outlook上中斷。

對於響應圖像而言，最好的選擇是將圖像設置爲具有最大寬度的表格中的100％寬度。然後圍繞此表爲MSO創建條件代碼，該代碼包含最大寬度大小的設置寬度表。下面

實施例：

<!--[if gte MSO 9]> 
<table width="640"><tr><td> 
<![endif]--> 
<table width="100%" style="max-width:640px;"><tr><td><img src="image.jpg" width="100%" /></td</tr></table> 
<!--[if gte MSO 9]> 
</td></tr></table> 
<![endif]-->

有仍然會出現一些怪癖使用最大寬度，因爲不是所有的客戶端支持它。我會查看CSS compatability，並根據需要進行小小的調整，以確保它合適。然後測試一些測試和測試。

來源

2015-04-22 16:06:59 Gortonington

在電子郵件中，我一直在腦海中打破了我的頭像。最後讓它以「響應式」的方式工作......有點。我發現，雖然有些電子郵件客戶端會忽略CSS的<img>標籤（至少CSS爲width和max-width），並將圖片設置爲其全部寬度，但其中大部分實際上會尊重直接在<img>上設置的width屬性。所以這是我做過什麼：

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

然後：

.logo { 
    display: block; 
    width: 310px !important; 
    max-width: 100% !important; 
}

尊重的CSS客戶端，將使用CSS的形象，而忽略它的客戶將只需要設置寬度爲250像素，因此圖像不會破壞不同屏幕大小的佈局。

來源

2017-11-25 16:20:01 GTCrais

如何在HTML電子郵件中響應圖像而不管圖像大小

回答

相關問題