it-swarm.com.de

Wie Sie ein Bild in HTML-E-Mails unabhängig von der Bildgröße reaktionsfähig machen

Ich erstelle eine E-Mail-Vorlage, in der mein Container eine maximale Breite von 600 Pixel hat. Ich möchte Bilder hochladen können, die breiter als 800px sind, und die Bilder verkleinern, um das beabsichtigte Seitenverhältnis beizubehalten. Selbst wenn ich ein 800 Pixel breites Bild hochlade, wird es auf 600 Pixel skaliert.

In Outlook wird meines Erachtens die maximale Breite für Bilder nicht unterstützt, was zu einer Dehnung geführt hat.

Gibt es dafür irgendwelche Lösungen?

6
Raj Chudasama

Ja und nein. Outlook tendiert dazu, das Bild auf seine tatsächliche Größe zu zwingen, unabhängig von Ihren CSS- und HTML-Größen. Wenn Sie also Bilder verwenden, die größer sind als auf Ihrer Desktop-Version angezeigt werden sollen, kann dies in Outlook zu Problemen führen.

Für reaktionsschnelle Bilder ist es am besten, wenn die Bilder zu 100% in einer Tabelle mit maximaler Breite angezeigt werden. Erstellen Sie dann um diese Tabelle herum bedingten Code für MSO, der eine Tabelle mit festgelegter Breite und maximaler Breite enthält.

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

Es wird immer noch einige Macken bei der Verwendung von max-width geben, da nicht alle Clients dies unterstützen. Ich würde CSS-Kompatibilität anzeigen und darüber nach Bedarf kleine Änderungen vornehmen, um sicherzustellen, dass es passt. Dann teste teste und teste noch mehr.

8
Gortonington

Ich habe mir seit einem Tag den Kopf über die Bildbreite in E-Mails gebrochen. Endlich hat es funktioniert in einer "reaktionsschnellen" Weise ... etwas. Ich habe festgestellt, dass einige E-Mail-Clients zwar CSS für <img>-Tags ignorieren (mindestens CSS für width und max-width) und das Bild auf die volle Breite festlegen, die meisten jedoch das width-Attribut berücksichtigen, das direkt für <img> festgelegt wurde. Das habe ich also getan:

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

Und dann:

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

Clients, die das CSS respektieren, verwenden CSS für das Bild, während Clients, die es ignorieren, nur die Breite 250px haben, damit das Bild das Layout für verschiedene Bildschirmgrößen nicht beschädigt.

2
GTCrais

Ich habe eine Bedingung für Mobilgeräte verwendet, ein Div-Tag eingefügt und die URL des Hintergrundbilds mit definierten Prozentsätzen für Höhe und Breite festgelegt, und das Div-Tag hat definierte Grenzen. Funktioniert so viel besser als das img-Tag. Die folgende Bedingung behandelt das Anzeigen von Bildern in einem anderen E-Mail-Client als Outlook, wie z. B. Mobile Browser, WebMail usw. Funktioniert auch für Bilddaten.

Example:
   <!--[if !mso]> <!-->
    <div    
style="
    background-image:url(http://www.example.org/image.png); 
    background-repeat:no-repeat;
    background-size:100% 100%; 
    width:auto; height: 300px;
"> 
    </div>
   <!-<![endif]->
1
Demetre Phipps