html - template - Altura y ancho del estilo de la imagen no incluidos en los correos de Outlook

plantilla email html responsive

Question

Tengo una siguiente estructura dom en contenido html que estoy enviando como correo electrónico.

<a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7"
 target="_new">
<span style=''text-decoration:none;text-underline:none''>
<img border=0 id="_x0000_i1026"
 src="http://dev.mindmatrix.net/page/e7c9cf53-bae8-4024-a561-355f950cb26b/635246986810000000/original.jpeg?userid=cozmwz91irkm1"
 style=''border-bottom-color:black;border-bottom-style:solid;border-bottom-width:
 1px;border-left-color:black;border-left-style:solid;border-left-width:1px;
 border-right-color:black;border-right-style:solid;border-right-width:1px;
 border-top-color:black;border-top-style:solid;border-top-width:1px;
 height:150px;width:120px''>
</span></a>

Estoy dando height:150px;width:120px estilo height:150px;width:120px a la imagen para hacerla de tamaño miniatura. La altura y el ancho real de esta imagen son muy grandes. El problema es que este estilo no se toma cuando el correo entra en la bandeja de entrada de Outlook. Entonces mis preguntas son -

1) ¿Cómo puedo hacer que css funcione para configurar la altura y el ancho?

2) La imagen aparece borrosa en el correo vivo de Windown . No estoy seguro de si persistirá en la perspectiva cuando tenga éxito en la fijación del estilo de alto y ancho. Entonces, ¿cómo puedo solucionar esto?

Answer 1

El px necesita ser dejado, por alguna extraña razón.

Answer 2

Esto funcionó para mí:

src="{0}"  width=30 height=30 style="border:0;"

Nada más ha funcionado hasta ahora.

Answer 3

Esto funciona para mí en Outlook:

<img src="image.jpg" width="120" style="display:block;width:100%" />

Espero que te sirva

Answer 4

Pon el ancho y la altura en atributos separados, sin unidad:

<img style="margin: 0; border: 0; padding: 0; display: block;"
src="images/img.jpg" width="120" height="150">

Otra opción:

<!--[if gte mso 9]>
<style type="text/css">
img.header { width: 600px; } /* or something like that */
</style>
<![endif]-->

Answer 5

Puede confirmar que dejar px fuera del ancho y alto hizo el truco para Outlook

<img src="image.png" style="height: 55px;width:139px;border:0;" height="55" width="139">

Answer 6

Tengo el mismo problema para la imagen que no se muestra correctamente en outlook.and estoy usando px y% para aplicar alto y ancho para la imagen. pero cuando eliminé px y% y solo uso cualquier valor en html me funcionó. Por ejemplo, yo estaba usando: width = "800px" ahora estoy usando widht = "800" y el problema está resuelto para mí.

Answer 7

Tuve el placer de crear un correo electrónico para Outlook 2010 basado en datos de sharepoint. Pero al crear un correo electrónico de perspectiva, Outlook en su sabiduría reduce el ancho y la altura de imga a cm. Curiosamente, el ancho y la altura se activan correctamente cuando reenvía el correo electrónico, pero no cuando lo abre.

hack fix

Tenía una imagen de 720px X150px que debería ser de 19.05cm x 3.98cm. PERO outlook establece el ancho y alto de la imagen en (15.24cm X 3.18cm). * claramente esto es un problema.

el truco que utilicé fue configurar la etiqueta de imagen html de la siguiente manera

<img src="...." style="width:720px;heigh:150px" width="900" height="187.5" />

por qué ese ancho y alto; así es la relación (aumento del 25%) entre lo que las perspectivas estaban diciendo y lo que debería ser (720 X 25% = 900). No es bonito, pero funciona.

Answer 8

<img id="_x0000_i1026" src="images/img.jpg" width="120" height="150" />

Esto funcionó para mí tanto en gmail como en Outlook.