Jak sprawić, by obraz reagował na wiadomości e-mail w formacie HTML niezależnie od rozmiaru obrazu

Question

Tworzę szablon wiadomości e-mail, w której mój kontener ma maksymalną szerokość: 600 pikseli. Chcę móc przesyłać obrazy o szerokości przekraczającej 800 pikseli, a obrazy można przeskalować, aby zachować zamierzony współczynnik proporcji. Więc nawet jeśli prześleję obraz o szerokości 800 pikseli, będzie on skalowany do 600 pikseli.

W programie Outlook, nie sądzę, że obsługuje max-width dla obrazów, które spowodowane jest zatem, aby rozciągnąć.

Czy są jakieś rozwiązania?

Answer 1

Tak i nie. Outlook zazwyczaj wymusza na obrazie rzeczywisty rozmiar, niezależnie od rozmiaru CSS i HTML. Dlatego korzystanie z obrazów, które są większe niż te, które chcesz wyświetlać w wersji na komputery, może przerwać działanie Outlooka.

Najprościej dla reagujących obrazów byłoby mieć obrazy jako 100% szerokości w środku tabeli, która ma max-width zestawu. Następnie wokół tej tabeli utwórz kod warunkowy dla MSO zawierający tabelę szerokości zestawu o maksymalnym rozmiarze.

Przykład poniżej:

<!--[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]--> 

będą jeszcze jakieś dziwactwa z użyciem max-width, ponieważ nie wszystkie wsparcia IT klienta. Chciałbym zobaczyć CSS compatability i wprowadzić drobne poprawki w razie potrzeby powyżej, aby upewnić się, że pasuje. Następnie sprawdź test i sprawdź więcej.

Answer 2

Przez jeden dzień łamałem sobie głowę przez szerokość obrazu w wiadomościach e-mail. W końcu sprawiło, że działał w "responsywny" sposób ... w pewnym sensie. Odkryłem, że podczas gdy niektórzy klienci poczty e-mail zignorują znaczniki CSS dla <img> (przynajmniej CSS dla width i max-width) i ustawią obraz na pełną szerokość, większość z nich będzie faktycznie respektować zestaw atrybutów width bezpośrednio na <img>. Więc to, co zrobiłem:

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" /> 

A potem:

.logo { 
    display: block; 
    width: 310px !important; 
    max-width: 100% !important; 
} 

Klienci, którzy szanują CSS, będzie użyć CSS dla obrazu, a klienci, którzy go ignorują po prostu mają szerokość ustawiona na 250px, aby obraz nie naruszał układu dla różnych rozmiarów ekranu.