Overflow: nascosto non funziona nell'e-mail

Question

Sto cercando di inviare alcune e-mail con alcune immagini. Se visualizzo le immagini su una pagina web sono 100x di larghezza e 100px di altezza, ma se l'immagine è più alta di 100 pixel, i pixel in eccesso verranno nascosti.

Se provo a inviarlo in un messaggio di posta elettronica, non riesco a farlo ritagliare l'altezza in eccesso dell'immagine.
Ecco quello che sto inviando nella e-mail:

<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

E 'del tutto possibile che il CSS che si sta cercando non è solo supportata dal client di posta elettronica. I client di posta elettronica in genere supportano un sottoinsieme molto ridotto di HTML e solo un minimo di CSS. Quando componi email in formato HTML, è spesso il caso di tornare alle nozioni di base ... layout di tabella HTML ecc. Per ottenere il massimo supporto.

EDIT: IMO cercando di raccolto un'immagine utilizzando HTML/CSS sta per essere impossibile se si vuole far funzionare tutto questo attraverso tutti client di posta elettronica. Le proprietà pertinenti che potrebbero aiutare a raggiungere questo obiettivo: immagine di sfondo, altezza, overflow, clip, ecc. Non sono supportate su tutta la linea. Quindi, anche se funzionerà per alcuni, non lo sarà per gli altri.

Un'alternativa potrebbe essere ridurre la larghezza in modo che l'altezza sia sempre di 100 px. Dovresti calcolare la larghezza lato server per mantenere le proporzioni appropriate.

Tuttavia, penso che potrebbe essere la soluzione migliore sarebbe quella di generare un'immagine (100%) quadrata di 100 px lato server con PHP?

Answer 2

Si potrebbe voler dare un'occhiata alla pagina Guide to CSS support in email clients per vedere quali attributi CSS è possibile e non è possibile utilizzare per i vari client di posta elettronica.

Answer 3

Per fare questo lavoro è necessario creare un oggetto quadrato (Div o tabella) e posizionare l'immagine in esso come un'immagine di sfondo. Se è necessario che l'immagine sia un collegamento, è necessario posizionare una gif trasparente su di essa.

Answer 4

In risposta a Alan O'Rourke l'immagine di sfondo non è supportata nei client di posta di Outlook. Inoltre, se stai tentando di utilizzare l'immagine di sfondo, assicurati di includerla come uno stile in linea poiché Gmail rimuoverà qualsiasi CSS che non sia in linea.