Resim boyutu ne olursa olsun HTML e-postasında görüntü duyarlılığı nasıl oluşturulur

Question

Kapsayıcımın maksimum genişliğe sahip olduğu bir e-posta şablonu oluşturuyorum: 600 piksel. 800 piksel genişliğindeki görüntüleri yüklemek ve görüntüleri istenen en boy oranını korumak için küçültmek istiyorum. Bu yüzden, 800 piksel genişliğinde bir resim yüklesem bile, 600 piksele kadar ölçeklenir.

Outlook'ta, resimlerin maksimum genişliğini desteklediğini düşünmüyorum.

Bunun için herhangi bir çözüm var mı?

Answer 1

Evet ve hayır. Outlook, CSS ve HTML boyutlandırmalarınız ne olursa olsun görüntüyü gerçek boyutuna zorlar. Bu yüzden, masaüstü sürümünüzde istediğiniz görüntüden daha büyük olan görüntüleri kullanmak, Outlook'ta bozulmaya neden olacaktır.

Duyarlı görüntüler için en iyi seçiminiz, resimlerin maksimum genişlik kümesine sahip bir tablo içinde% 100 genişlikte olması olabilir. Ardından bu tablonun etrafından, maksimum genişlik boyutunda bir set genişlik tablosu içeren MSO için koşullu kod oluşturun. Aşağıda

Örnek:

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

hala tüm istemci desteği o kadar max-width kullanarak bazı tuhaflıklar olacaktır. Ben CSS compatability görüntüleyebilir ve uygun olduğundan emin olmak için yukarıdakilerin üstüne küçük tweaks yapmak. Daha sonra testi test edin ve biraz daha test edin.

Answer 2

Bir gün boyunca e-postalarda başımı görüntü genişliği üzerinden kırdım. Sonunda bir şekilde "duyarlı" bir şekilde çalışmaya başladı. Ne bulduğum, bazı e-posta istemcileri <img> etiketleri (en az width ve max-width için CSS) için CSS'yi göz ardı edip görüntüyü tam genişliğine ayarlamayacak olsa da, bunların çoğu <img> üzerinde doğrudan width özniteliğine uyar. Yani bu ne yaptım: o zaman

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

Ve:

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

CSS saygı Müşteriler, görüntü için CSS kullanır, bunu görmezden müşteriler sadece genişlik 250px için ayarlamış olurken, böylece görüntü farklı ekranlar için düzeni bozmaz.