電子郵件間距中的動態圖像

我正在構建一個電子郵件，其中會有3個圖像每月加載促銷優惠。有些月份可能只有2個優惠，而第三張圖片的想法是隻保存1x1 spacer.gif，這樣非開發人員就可以更新促銷圖片。電子郵件間距中的動態圖像

問題是，如果我沒有在每個圖像上設置特定的高度，那麼當spacer.gif被替換時，瀏覽器會將其顯示爲一個巨大的間隙，實質上高度變得與寬度相同。

有沒有人有任何想法我可以解決這個問題，所以沒有這麼大的差距，但我不必鎖定在那裏的高度？

下面是相關代碼：

<table width="700" align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0" style="min-width:700px"> 
      <tbody> 
       <tr> 
        <td><img src="images/spacer.gif" width="40" height="1" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;"/></td> 
        <td> 
        <table width="620" align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0" style="min-width:620px"> 
        <tbody> 
         <tr> 
          <td> 
          <!-- Offer 1 --> 
          <a href="" title="Offer" target="_blank"><img src="images/cm_spof_01.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a> 
          <!-- Offer 2 --> 
          <a href="" title="Offer" target="_blank"><img src="images/cm_spof_02.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a> 
          <!-- Offer 3 --> 
          <a href="" title="Offer" target="_blank" style="height:auto;"><img src="images/cm_spof_03.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a> 
          </td> 
         </tr> 
        </tbody> 
        </table> 
        </td> 
        <td><img src="images/spacer.gif" width="40" height="1" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;"/></td> 
       </tr> 
      </tbody> 
     </table>

來源

2014-02-26 xoam

讓您的1x1 GIF更寬像600x1代替。

此外，你可以離開的高度關上所有的圖像標籤，例如，這是如何創造流暢的圖像：

<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

來源

2014-02-26 18:12:43 John

它是如此簡單，我不知道爲什麼我沒有看到它之前。基本上我不需要將gif做得更寬一些。我只是刪除了高度和寬度，它似乎在石蕊中測試好了。 – xoam

電子郵件間距中的動態圖像

回答

相關問題