Desbordamiento: oculto no funciona en el correo electrónico

Question

Estoy tratando de enviar algunos correos electrónicos con algunas imágenes. Si visualizo las imágenes en una página web, tienen 100x de ancho y 100 px de alto, pero si la imagen es más alta que 100 píxeles, ocultará el exceso de píxeles.

Si trato de enviarlo por correo electrónico, no puedo hacer que recorta el exceso de altura de la imagen.
Aquí es lo que estoy enviando en el correo electrónico:

<img src="<?php echo base_url().$thumb;?>" style="border:1px solid #35538d;width:100px;height:100px;overflow:hidden;text-align:center;background-color:#f0f0f0;" rel="nofollow" alt="Profile Photo"> 

Answer 1

Es muy posible que el CSS que se está tratando simplemente no es compatible con su cliente de correo electrónico. Los clientes de correo electrónico generalmente admiten un subconjunto reducido de HTML y solo CSS mínimo. Al componer correos electrónicos en HTML, a menudo es un caso de , volviendo a lo básico ... diseño de la tabla HTML, etc. para obtener el mayor soporte.

EDIT: tratando OMI a los cultivos una imagen utilizando HTML/CSS va a ser imposible si quieres que esto funcione a través de todos los clientes de correo electrónico. Las propiedades relevantes que podrían ayudar a lograr esto: imagen de fondo, altura, desbordamiento, clip, etc. simplemente no son compatibles en todos los ámbitos. Entonces, aunque funcionará para algunos, no lo hará para otros.

Una alternativa podría ser reducir el ancho para que la altura sea siempre de 100 px. Debería calcular el ancho del lado del servidor para mantener la relación de aspecto adecuada.

Sin embargo, creo que la mejor solución sería generar un lado del servidor de imagen 100px (más) cuadrado con PHP?

Answer 2

Es posible que desee echar un vistazo a la página Guide to CSS support in email clients para ver qué atributos CSS puede y no puede usar para los diversos clientes de correo electrónico.

Answer 3

Para hacer esto, debe crear un objeto cuadrado (Div o tabla) y colocar la imagen en él como una imagen de fondo. Si necesita que la imagen sea un enlace, debe colocar un archivo .gif transparente sobre ella.

Answer 4

En respuesta a Alan O'Rourke, la imagen de fondo no es compatible con los clientes de correo electrónico de Outlook. Además, si intenta utilizar la imagen de fondo, asegúrese de incluirla como un estilo en línea, ya que Gmail quitará cualquier CSS que no esté en línea.