¿Cómo puedo crear un efecto de máximo ancho y alto máximo en una imagen enviada en un correo electrónico HTML?

Question

Mi aplicación envía correos electrónicos HTML que contienen una o más imágenes de tamaño desconocido y proporciones de ancho/alto. El efecto que quiero es

<img style="max-width: 200px; max-height: 200px;" src="..." /> 

embargo

, parece que la mayoría de los clientes de correo electrónico, como Gmail y Outlook 2010, ignore este css. Simplemente configurar el ancho y alto no funciona porque la imagen no es cuadrada, y no sé el tamaño y la proporción antes de tiempo.

Answer 1

Con tamaños desconocidos de imágenes, la ruta programática funcionará: durante el procesamiento/creación de su correo electrónico, tendrá que echar un vistazo a las dimensiones de las imágenes y establecer el alto y el ancho en consecuencia en el html.

De esta manera, se asegurará de tener imágenes correctamente escaladas en todos (o la mayoría de :)) clientes.

Answer 2

Lamentablemente, no hay muchas propiedades de CSS que sean ampliamente compatibles con los clientes de correo electrónico.

Aquí hay un chart about the current situation.

Solo puedo pensar en una opción como lo que sugirió @Groovetrain, o en su lugar generar miniaturas mediante programación a partir de las imágenes, almacenarlas y usarlas en el correo electrónico.

Answer 3

Si no se puede hacer una solución programática como Groovetrain sugirió, la mejor ruta es a

1. Conocer las dimensiones max & min que son posibles para la imagen que va a aparecer.
2. Asegúrese de que el elemento contenedor permita las dimensiones máximas.
3. En el elemento contenedor, establezca la alineación vertical horizontal & (y si es necesario el relleno) para que el correo electrónico se vea aceptable con las imágenes más grandes y las más pequeñas posibles.

Trabajo con un sistema de correo electrónico con compatibilidad API limitada, por lo que a veces he tenido que ponerme de pie e insistir en que las imágenes con las que trabajamos cambian de tamaño antes de subirlas.

Answer 4

Sé que esto es viejo, pero acabo de tener que implementar esto. Sobre la base de lo que Groovetrain sugiere - programación mirando la imagen cuando se genera el código HTML de correo electrónico - aquí hay un código ASP.NET C# que restringe el ancho de una imagen a 600 si es demasiado grande:

string imgPth = HttpContext.Current.Server.MapPath("/images/yourimage.jpg"); 
System.Drawing.Image img = System.Drawing.Image.FromFile(imgPth); 
string emailImage = "<img src='http://www.yourdomain.com/images/yourimage.jpg'"; 
if (img.Width > 600) 
    emailImage += " width='600' style='width:600px;'"; 
emailImage += "/>"; 

Entonces, obviamente, agregue emailImage a su cuerpo de correo electrónico.

Answer 5

Usted puede utilizar este método para controlar la anchura:

<table width="100%"> <!-- a width 100% container --> 
    <tr> 
     <td></td> <!-- an empty cell, which will adapt its width --> 
     <td width="200"> <!-- it's like max-width:200px --> 
      <img src="your_image" width="100%" /> 
     </td> 
     <td></td> <!-- another empty cell, which will adapt its width --> 
    </tr> 
</table> 

Este truco debería funcionar. Si su pantalla tiene menos de 200 px de ancho, ¡la imagen también debería aparecer más pequeña! ¡De manera predeterminada, la imagen será central! Si quiere que esté alineado a la izquierda oa la derecha, intente eliminar la primera celda vacía, o la última (dependiendo de lo que quiera hacer)

Para la altura máxima, no tengo ni idea ... En este caso, la altura se calculará automáticamente

Espero que les ayude a sus compañeros!

Editar: Estoy de acuerdo con la mejor respuesta. Si un script construye su correo electrónico, pídale a su script que elija el ancho y alto, y adapte su código. debería funcionar ...