Como fazer uma imagem responsiva no E-mail HTML, independentemente do tamanho da imagem
estou a criar um modelo de E-mail onde o meu contentor tem uma largura máxima: 600px. Eu quero ser capaz de carregar imagens que são em excesso de 800px de largura, e as imagens para reduzir para baixo para manter a sua relação de aspecto pretendido. Então, mesmo que eu carregasse uma imagem de 800px de largura, iria escalar para 600px.
no Outlook, acho que não suporta a largura máxima para as imagens que, portanto, fez com que se esticasse.
Há alguma solução para isto?2 answers
A sua melhor aposta para imagens sensíveis seria ter as imagens como 100% de largura dentro de uma tabela que tem a largura máxima definida. Em seguida, em torno desta tabela, faça o código condicional para MSO que contém uma tabela set width no tamanho max-width.
Exemplo abaixo:<!--[if gte MSO 9]>
<table width="640"><tr><td>
<![endif]-->
<table width="100%" style="max-width:640px;"><tr><td><img src="image.jpg" width="100%" /></td</tr></table>
<!--[if gte MSO 9]>
</td></tr></table>
<![endif]-->
Ainda haverá algumas peculiaridades com o uso da largura máxima, pois nem todos os clientes suportam isso. Eu veria a compatibilidade CSS e faria pequenos ajustes, conforme necessário, em cima do acima para garantir que se encaixa. Então teste e teste um pouco mais.
<img> (pelo menos CSS para width e max-width) e definir a imagem em toda a sua largura, a maioria deles irá realmente respeitar o atributo width definido directamente no <img>. Então foi isto que eu fiz:
<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />
E depois:
.logo {
display: block;
width: 310px !important;
max-width: 100% !important;
}
Os Clientes que respeitam o CSS, irão usar o CSS para a imagem, enquanto os clientes que ignorá-lo terá apenas largura definida para 250px, de modo que a imagem não quebra o layout para diferentes screensizes.