Les images sont tronquées dans Outlook 2007/2010

Question

Les images ont perdu la première rangée de pixels, mais seulement dans certaines situations. Exemple balisage:

<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td valign="top" height="20"> 
      <div style="line-height:0;"><img src="http://path.to/image.png" alt="" height="20" width="25" /></div> 
     </td> 
    </tr> 
</table> 

J'avais l'impression que depuis <img> est un élément en ligne, il doit être contenu à l'intérieur d'un élément de niveau bloc. C'est pourquoi j'ai enveloppé mon <img> en <div>. Mais cela a provoqué un problème où le sous-blocage du texte a causé mon <div> trop grand. J'ai donc mis line-height à 0 comme une solution de contournement.

Peu importe ce que height ou valign je mis sur le <td> ou <img>, le haut de l'image est toujours coupée. J'ai trouvé que supprimer la hauteur de ligne était la réponse. Pourquoi est-ce?

Je vais utiliser display: block sur mes tags <img> dans le futur.

Answer 1

<div> s traitées différemment en fonction du client de messagerie que vous utilisez. L'IE des clients de messagerie est AOL (mais, qui l'utilise plus). Je pense que chipcullen a raison de penser que vous y réfléchissez un peu. Pourquoi mettre plus de code que nécessaire. Donnez à ceci un essai (pas de ligne reaks dans le TD):

<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td><img src="http://path.to/image.png" alt="" height="20" width="25"></td> 
    </tr> 
</table> 

Ou si vous devez vraiment définir des hauteurs:

<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td height="20" style="height:20px;line-height:20px;"><img src="http://path.to/image.png" alt="" height="20" width="25"></td> 
    </tr> 
</table> 

Hope that helps!

Answer 2

Cela se produit dans Outlook lorsqu'une image très longue est insérée dans une campagne. La limite pour la longueur de l'image est d'environ 1728px. Outlook va couper l'excès du haut des images de plus de 1728px.

Si vous ne pouvez pas réduire la taille de votre image à moins de 1728px, la meilleure solution consiste à recadrer l'image en images séparées. Si vous utilisez un modèle de glisser-déposer, vous pouvez ajouter plusieurs blocs Image à la campagne pour télécharger chaque partie de l'image. Pour vous assurer que les images apparaissent sous la forme d'une seule image fluide, accédez à l'onglet Paramètres pour chaque bloc Image et sélectionnez la case à cocher Bord à bord sous Marges.