Wie dynamisch ändern Sie die Größe eines Bildes in einer E-Mail-client?

Möglichkeiten gibt es, um die Größe eines Bildes zu passen thew-Fenster das Bild angezeigt wird in OHNE javascript und begrenzt CSS?

Ich Frage, weil ich eine E-Mail-Kampagne, die ich senden, verfügt über ein Haupt-Bild, das will ich so groß wie möglich ohne scrollen. Ich habe gelesen, der Wege, dies zu tun mit javascript und jQuery aber ich sehe nicht einen Weg, dies zu tun, dass die Mehrheit der E-Mail-clients Lesen und reagieren richtig. Ist das möglich? Und wenn ja - Wie?

InformationsquelleAutor L84 | 2012-05-22

  1. 5

    Dies ist, wie Sie sollten in der Lage sein, es zu tun

        /****this is the Css****/
    .full {
     width:100%;
     height:auto;
     }
    /***end Css***/
   <!--Now the html--!>
   <section>
   <img src="image/main.png" class="full">
   </section>

    Oder Sie gehen den einfachen Weg

    *update

    Sie können es tun, wie dieses

        <img src="image/main.png" style="width:100%; height:auto; border:none;" />

    und wenn Sie haben eine option, um es als html zu tun es so, wie es sollte korrekt gerendert, wie das

    Ich müsste dies tun, indem Sie die inline-Stile für E-Mail-clients. Aber, die gelesen werden von der Mehrheit der E-Mail-clients?
    Ich habe versucht, und es hat ein paar Pannen scheint es in der E-Mail-clients. Arbeiten immer noch mit ihm, obwohl, wenn Sie irgendwelche Gedanken.
    Andere sehen diese Antwort - Diese Antwort funktioniert in irgendeinem E-Mail-clients. Test vor der Verwendung.

    InformationsquelleAutor nick perez

  2. 9

    Dies ist der richtige Weg, es zu tun für eine html-E-Mail:

    <img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

    Es wird automatisch die Größe entsprechend der Breite des container-Elements ist (das sollte immer ein <td>).

    Beachten Sie, dass auf einigen clients (Outlook '07, '10 & '13), das Bild wird nicht überschreiten Sie die maximalen Abmessungen. Wenn Sie mit einer max-width-fluid-template wird dies nicht ein Problem der Bereitstellung Ihrer Bildbreite entspricht die maximale Breite.

    Dies hat bei mir nicht funktioniert in outlook 2016. Bild im <td>. Statt der erwarteten 110px Breite (Breite der übergeordneten Tabellenzelle) wird es riesig, wahrscheinlich 100%.
    diese Antwort sollte das akzeptiert man

    InformationsquelleAutor John

  3. 1

    Müssen Sie so archaisch wie möglich zu machen HTML-E-Mails für alle clients.

    Inline-styles und HTML-4-code sollte den trick tun. Werden Sie gewarnt, wenn - max-width und max-height funktioniert bei den meisten Kunden, dies gilt jedoch NICHT für Outlook 2007/2010/2013/365, die auch über die Hälfte Ihrer Zielgruppe. Breite funktioniert in allen Kunden - aber NICHT auf div und p-tags in Outlook 2007/2010/2013/365! Immer verwenden Sie Tabellen, divs nicht sicher zu sein, wird es funktionieren.

    Grundsätzlich immer davon aus, dass etwas nicht geht, zu arbeiten und das design für die kleinste mögliche Marge für Fehler - und STETS mit inline-styling oder es könnte auch sein, daß sich ausgezogen.

    Wenn Sie Zweifel haben, konsultieren Sie die oracle, Mach ich immer 🙂

    Quelle: https://www.campaignmonitor.com/css/b/

    InformationsquelleAutor John Lewis

  4. 0

    WIE MAN EIN BILD VERKLEINERN, SICH SELBST IN EINE GMAIL -

    Erste, hier ist der HTML-code, mit denen wir arbeiten:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Image Resizer</title>
</head>
<body>
    <!-- Point to your image by placing the path in the source (src) attribute. -->
    <img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>

    HINWEIS: Beachten Sie, dass der Teil liest "http://yourImagePathHere.jpg". Dies ist der Pfad, die Punkte, um das von Ihnen gewünschte Bild in der Größe verändert in der GMail. Legen Sie die URL für dein Bild hier. Um diesen code auszuführen
    in einem browser, den Sie brauchen, um es zu speichern als HTML-Dokument. Sie können
    erreichen dies durch kopieren und einfügen den code in ein code-editor oder text
    editor (wie Editor auf einem PC oder TextEdit auf einem MAC) und speichern Sie es mit der
    Erweiterung “.html -".

    Wenn Sie mit TextEdit auf einem MAC, müssen Sie zum Umschalten auf nur-text-Bearbeitung
    vor dem einfügen den code. Um dies zu tun, wählen Sie "Make Plain Text" aus dem "Format"
    Menü.

    Für dieses Beispiel nehmen wir an, Ihr name ist "image_resizer.html". Wenn Sie
    brauchen, um das Bild zu ändern, müssen Sie Bearbeiten Sie die HTML-Dokument mit einem code
    - oder text-editor. Um dies zu tun, rechts-klicken Sie auf das HTML-Dokument und wählen Sie "Öffnen Mit"
    und wählen Sie einen code-editor oder text-editor. Dann tauschen Sie die Bild-source-Pfad
    (Fett formatiert wie im Beispiel oben), zu ersetzen mit dem Pfad, dass Punkte auf die
    das aktualisierte Bild. Dann speichern, und Ihre HTML-Datei sollte bereit zu gehen, und aktualisiert
    auf dem neuen Bild.

    Wenn Sie mit TextEdit auf einem MAC, Sie benötigen, um starten Sie ein neues Dokument,
    switch to plain text Bearbeiten, fügen Sie den code erneut ein, und ändern Sie dann den Pfad zu der
    Bild.

    Schritt 1: Öffnen Sie image_resizer.html in einem browser. Um dies zu tun, doppelklicken Sie darauf, ODER
    klicken Sie rechts und wählen Sie einen browser aus der "Öffnen Mit" - Menü.

    Schritt 2: Klicken Sie irgendwo auf der Webseite. Klicken Sie auf das Bild selbst oder die
    Leerraum auf der Webseite. Die Idee hier ist, um sicherzustellen, dass wir haben
    die Zeiger der Fokus auf das Fenster, um zu überprüfen, dass die Seite fertig ist, ausgewählt zu werden.

    Schritt 3: Wählen Sie Alle. Tun Sie dies, indem Sie "Strg + A" auf einem PC ... ODER ... "Befehl + A"
    auf einem MAC. Der Seite Inhalt wird markiert.

    Schritt 4: Kopieren. Tun Sie dies, indem Sie "Strg + C" auf einem PC ... ODER ... "Befehlstaste + C" auf
    ein MAC. Der Seite Inhalt wird in die Zwischenablage kopiert werden. (Das bedeutet nur, dass
    der computer merkt es).

    Schritt 5: Nun, dass der Inhalt in die Zwischenablage kopiert (gespeichert durch die
    computer) öffnen Sie Ihre Gmail und klicken Sie auf die Schaltfläche schreiben. Platzieren Sie Ihren Cursor in
    der content-Bereich (klicken Sie in den Bereich, wo Sie geben Sie eine Nachricht ein).

    Schritt 6: Einfügen. Tun Sie dies, indem Sie "Strg + V" auf einem PC ... ... ODER "Command + V" auf
    ein MAC.

    Schritt 7. Beenden Sie die Eingabe Ihrer E-Mail-Nachricht und senden Sie es.

    InformationsquelleAutor user2494494

  5. 0

    War ich den Umgang mit wirklich großen Bildern, ohne jede Art von container. Ich reparierte es mit max-width um sicherzustellen, das Bild wäre nicht zu groß.

        <img
        src=""
        width="100%"
        style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
    />

    Sowohl mittels width und max-width sorgt dafür das Bild in voller Verfügbarer Speicherplatz, aber nicht zu viel. Ich verwendet 80vw und nicht 100 weil die Menschen nur selten Ihre E-Mails Lesen in einem fullscreen-Modus, in der Regel häufiger mit einem viewer (Gmail), die in der Regel verwendet ein bisschen von den verfügbaren Platz.

    InformationsquelleAutor Vadorequest

Schreibe einen Kommentar