Wie, um ein Bild Ansprechend in HTML-E-Mail, unabhängig von der Bildgröße

Ich bin erstellen einer E-Mail-Vorlage, wo mein container hat eine max-width: 600px. Ich möchte in der Lage sein, um Bilder hochzuladen, die über 800 Pixel breit und die Bilder zu verkleinern, halten Ihre soll-Seitenverhältnis. Also selbst wenn ich hochgeladen ein 800px breites Bild, würde es-Skala auf 600px.

In Outlook, ich glaube nicht, dass es unterstützt die max-Breite für die Bilder, die deshalb verursacht es zu Strecken.

Gibt es irgendwelche Lösungen dafür?

Wenn ich ein Bild hinzufügen, 540px, dann wird es reagieren, aber wenn ich upload von einem anderen Bild sagen, die ist 1000px breit, als auf mailchimp es sieht okay aus, aber wenn ich schickte eine test-emailt o mein outlook 2010, das Bild erstreckt sich auf die ursprüngliche Größe, die bewirkt, dass die die E-Mail zu Strecken.
Versuchen Sie, dies zu betrachten gist
Und wahrscheinlich ist dieses link kann hilfreich sein für Sie zu

InformationsquelleAutor Raj Chudasama | 2015-04-01

  1. 8

    Ja und Nein. Outlook neigt dazu zu zwingen, das Bild auf seine Originalgröße, unabhängig von CSS-und HTML-Größenbestimmung. Also mit Bildern, die größer sind als das, was Sie wollen auf Ihrem desktop angezeigt version ist wahrscheinlich zu brechen auf Outlook.

    Ihre beste Wette für responsive Bilder, die Bilder als Breite 100% innerhalb einer Tabelle mit max-width festgelegt. Dann um diesen Tisch, stellen Sie bedingten code für die MSO enthält eine festgelegte Breite der Tabelle am max-Breite Größe.

    Beispiel unten:

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

    Wird es noch einige Macken mit der Verwendung von max-width nicht alle Clients unterstützen. Ich würde CSS-Kompatibilität und wenig machen zwickt wie nötig auf der Oberseite der oben, um sicherzustellen, dass es passt. Dann testen, testen und testen einige mehr.

    InformationsquelleAutor Gortonington

  2. 2

    Brechen meinen Kopf über die Breite des Bildes in E-Mails für einen Tag jetzt. Schließlich bekam er Arbeit in einem "responsive" Art und Weise...irgendwie. Was ich gefunden habe ist, dass, während einige E-Mail-clients ignorieren CSS für <img> - tags (zumindest CSS für width und max-width), und setzen Sie das Bild auf die volle Breite, die meisten von Ihnen werden tatsächlich respektieren die width - Attribut direkt auf die <img>. Also das ist, was ich getan habe:

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

    Dann:

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

    Kunden, dass die Achtung der CSS, mit CSS für das Bild, während Kunden, die ignorieren, es wird nur noch die Breite festgelegt 250px, so dass das Bild nicht zu brechen das layout für die verschiedenen screensizes.

    InformationsquelleAutor GTCrais

Schreibe einen Kommentar