0
我正在創建一個響應式電子郵件設計，其中幾個圖像切換爲較小的屏幕。我重新格式化了表格和tds幾次，而較小的圖片沒有顯示。這些圖像是在線直播的。請幫忙。響應電子郵件 - 媒體查詢圖像不會加載
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy St. Patrick's Day</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
@media only screen and (max-width: 660px) {
table.one { width: 480px !important; }
table.two { width: 480px !important; }
table.three { width: 480px !important; }
table.four { width: 480px !important; }
table.five { width: 480px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-med.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-med.gif) no-repeat; height: 151px; }
td.maintext p {font-size: 26px; }
}
@media only screen and (max-width: 510px) {
table.one { width: 300px !important; }
table.two { width: 300px !important; }
table.three { width: 300px !important; }
table.four { width: 300px !important; }
table.five { width: 300px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-sm.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-sm.gif) no-repeat; height: 89px; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="one" align="center">
<tr>
<td bgcolor="#00a160" class="shamtop" style="background: #00A160; margin: 0px;"><img src="http://www.poscorp.com/emarketing/2015/images/top-shamrock-lrg.gif" width="600" height="79"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="two">
<tr>
<td bgcolor="#ffffff" class="maintext" style="font-family: Arial, Helvetica, sans-serif; font-size: 32px; line-height:120%; color: #000; background: #FFF; padding: 15px 18px 10px 18px; font-weight:bold; text-align:center;"><p style="margin-top: 0px; margin-bottom: 16px;">In honor of St. Patrick’s Day we’d like to save you some <span style="color: #00a160;">GREEN</span>!</p></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="three">
<tr>
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;"><img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195"></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:120%; color: #000; padding: 15px 20px 10px 20px; font-weight:bold; text-align:center;"><p style="font-size:22px; margin-top:0px; margin-bottom: 7px;">Enter to Win $200 Towards a NEW Print Item.</p>
<p style="margin-top:0px; margin-bottom: 0px;">All entries must be made by the end of day today. <br>
Five winners will be drawn.</p></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; padding: 0px 20px 15px 20px; text-align:center;"><a href="#"><img src="http://www.poscorp.com/emarketing/2015/images/enter-to-win-btn.gif" width="180" height="45"></a></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="four">
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><a href="http://www.poscorp.com/home.html" target="_blank"><img src="http://www.poscorp.com/emarketing/2015/images/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></a></td>
</tr>
</table>
<table width="275" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td><p style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; color: #333; font-weight:bold; margin:20px 0px 5px 0px; text-align:right;">800.331.4976 | <a href="http://www.poscorp.com/home.html" target="_blank" style="font-weight: bold; color: #333; text-decoration: none;">www.poscorp.com</a> | <a href="http://www.linkedin.com/company/professional-office-services" target="_blank"><img src="http://www.poscorp.com/emarketing/2015/images/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/></a></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="five">
<tr>
<td align="center" valign="top" style="font-family: Arial, sans-serif; font-size: 12px; line-height:115%; color: #FFF; background: #00a160; padding: 5px 15px 5px 15px; margin:0px; font-style:italic;"><p>This offer is non-transferable and entries are limited to one entry per recipient.<br>
Contest winners will be notified by March 19th.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html
您已經在img標籤中指定了'height'和'width'，但沒有更改它們，因此圖像仍然嘗試以較大的尺寸進行渲染。 – adamdc78 2015-03-13 19:20:25
感謝您的回覆。我不確定我是否關注你。我已經在其他電子郵件上設置了寬度/高度，沒有任何問題。我從主體標籤中的圖像中刪除了寬度和高度。它仍然不起作用。你能詳細說明一下嗎？ – Kristen 2015-03-13 19:36:39
是的，我錯過了那些在css中更新的東西。我相信咖啡因有幫助。 – adamdc78 2015-03-13 22:41:24