Большое изображение в электронной почте перемещено за пределы div - PullRequest
Новая
       12

Большое изображение в электронной почте перемещено за пределы div

1 голос
/ 19 июня 2019

Проблема

У меня странная ошибка с почтовым приложением Mac, которая отображает изображения в письме, отправленном с Python.

Полученное мной письмо в формате HTML выглядит так, как показано на рисунке ниже.Как вы можете видеть, второе синее изображение (размер 1048x1048) соответствует float: left; и отображается правильно, а первое (размер 1047x1047) странным образом выходит за пределы div.

* 1010.*

Создание электронного письма

Код для отправки электронного письма (с помощью Gmail): 

import smtplib
from email.mime.text import MIMEText
from email.header import Header
from email.message import EmailMessage
import os


def send_email(receiver, subject, content, attachments=None):
    if attachments is None:
        attachments = []
    if isinstance(receiver, str):
        receiver = [receiver]

    # Credentials
    sender = '...'
    username = '...'
    password = '...'

    msg = EmailMessage()
    msg['Subject'] = subject
    msg['From'] = 'Me <{}>'.format(sender)
    #msg['To'] = target

    msg.set_content(content)

    msg.add_alternative(content, subtype='html')

    for png_cid in attachments:
        full_path_to_png = os.path.abspath(os.path.join(
            os.path.dirname(__file__), attachments[png_cid]
        ))
        with open(full_path_to_png, 'rb') as png_file:
            file_contents = png_file.read()
            msg.get_payload()[1].add_related(file_contents, 'image', 'png', cid=png_cid)

    # The actual mail sent (Gmail SMTP)
    with smtplib.SMTP('smtp.gmail.com:587') as server:
        server.starttls()
        server.login(username, password)
        for rec in receiver:
            msg['To'] = rec
            server.sendmail(msg['From'], rec, msg.as_string())



text = """
    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr">
        <head>
            <title>Mail Sitzreservation</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta http-equiv="x-ua-compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">


            <style type="text/css">
                body{
                    font:14px/20px  'Open Sans', 'Verdana', sans-serif;
                    margin:0;
                    padding:75px 0 0 0;
                    text-align: left;
                    -webkit-text-size-adjust:none;       
                } 
                .ticket {
                    border: 3px solid #ddd;
                    border-radius: 30px;
                    overflow: auto;
                    width: 600px;
                    margin-bottom: 30px;
                    padding: 5px;
                    position: relative;
                    min-height: 150pt;
                }

                .ticket img {
                    float: left;
                    width: 200px;
                    height: 200px;
                }
            </style>
        </head>
        <body>
            <p>Test</p>

                <center>
                    <div class="ticket">
                        <img src="cid:qrcode_0" width="200" height="200" />
                    </div>
                    <div class="ticket">
                        <img src="cid:qrcode_1" width="200" height="200" />
                    </div>

                </center>
            </div>
        </body>
    </html>
"""

send_email('me@nowhere.com',
           'Bug-Test', text,
           attachments={'qrcode_0': 'qr_1048.png',
                        'qrcode_1': 'qr_1047.png'})

Угадай

Кажется,зависит от размера файла.Он работает для изображений размером менее 1047 пикселей, но не работает с 1048 пикселей.

Это какой-то внутренний CSS-код, который применяется в Mac's Mail?Если так, как я узнаю, и что еще более важно, как я могу перезаписать это?

Редактировать: Email Raw Source

И это необработанный источник полученной электронной почты.Я адаптировал его в соответствии с комментарием, чтобы он проверял проблему с div или table. 

Return-Path: <...@me.com>
Received: from mail-ed1-f46.google.com ([209.85.208.46]) by mx-ha.gmx.net
 (mxgmx011 [212.227.15.9]) with ESMTPS (Nemesis) id 0MLz3s-1hecv003bQ-007ixz
 for <...@me.com>; Tue, 25 Jun 2019 10:56:10 +0200
Received: by mail-ed1-f46.google.com with SMTP id a14so25961125edv.12
        for <...@me.com>; Tue, 25 Jun 2019 01:56:09 -0700 (PDT)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=gmail.com; s=20161025;
        h=message-id:date:subject:from:mime-version:to;
        bh=Q81uSirS6vgSowxeL9+vx8suDLPGjrIGip4maO4YGdc=;
        b=WDA...dGm
         T+LA==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=1e100.net; s=20161025;
        h=x-gm-message-state:message-id:date:subject:from:mime-version:to;
        bh=Q81uSirS6vgSowxeL9+vx8suDLPGjrIGip4maO4YGdc=;
        b=aOjG...yt0
         34qA==
X-Gm-Message-State: APjAAAWTlBfGZFL2cUCm9ZhnnYbcpSvKIOPc8heLIaDJPKM+b+0f1wbi
    J2PJWKqq+67llPfIL07is8P7KflU
X-Google-Smtp-Source: APXv...43g==
X-Received: by 2002:a50:b839:: with SMTP id j54mr138783731ede.155.1561452969415;
        Tue, 25 Jun 2019 01:56:09 -0700 (PDT)
Received: from me.home ([2a02:1205:c6ab:8d40:c1a:df46:4e0d:4072])
        by smtp.gmail.com with ESMTPSA id z16sm2300184eji.31.2019.06.25.01.56.05
        for <...@me.com>
        (version=TLS1_3 cipher=AEAD-AES256-GCM-SHA384 bits=256/256);
        Tue, 25 Jun 2019 01:56:08 -0700 (PDT)
Message-ID: <5d11e1a8.1c69fb81.72764.a642@mx.google.com>
Date: Tue, 25 Jun 2019 01:56:08 -0700 (PDT)
Subject: Bug-Test
From: Me <...@me.com>
MIME-Version: 1.0
Content-Type: multipart/alternative;
 boundary="===============1246061451293108858=="
To: ...@me.com
Envelope-To: <...@me.com>
X-GMX-Antispam: 0 (Mail was not recognized as spam); Detail=V3;
X-Spam-Flag: NO
X-UI-Filterresults: notjunk:1;V03:K0:VA+1C0Bdx4s=:1cFy...a3X+6

--===============1246061451293108858==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit


    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr">
        <head>
            <title>Mail Sitzreservation</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta http-equiv="x-ua-compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">


            <style type="text/css">
                body{
                    font:14px/20px  'Open Sans', 'Verdana', sans-serif;
                    margin:0;
                    padding:75px 0 0 0;
                    text-align: left;
                    -webkit-text-size-adjust:none;       
                } 
                .ticket {
                    border: 3px solid #ddd;
                    border-radius: 30px;
                    overflow-y: visible;
                    overflow-x: auto;
                    width: 600px;
                    margin-bottom: 30px;
                    padding: 5px;
                    position: relative;
                    min-height: 150pt;
                }

                .ticket img {
                    float: left !important;
                    width: 200px;
                    height: 200px;
                }
            </style>
        </head>
        <body>
            <p>Test</p>

                <center>
                    <table class="ticket"><tr><td>
                        <img src="cid:qrcode_0" width="200" height="200" />
                    </td></tr></table>
                    <table class="ticket"><tr><td>
                        <img src="cid:qrcode_1" width="200" height="200" />
                    </td></tr></table>

                    <div class="ticket">
                        <img src="cid:qrcode_0" width="200" height="200" />
                    </div>
                    <div class="ticket">
                        <img src="cid:qrcode_1" width="200" height="200" />
                    </div>

                </center>
            </div>
        </body>
    </html>

--===============1246061451293108858==
MIME-Version: 1.0
Content-Type: multipart/related;
 boundary="===============4631778948648796069=="

--===============4631778948648796069==
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit


    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr">
        <head>
            <title>Mail Sitzreservation</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta http-equiv="x-ua-compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">


            <style type="text/css">
                body{
                    font:14px/20px  'Open Sans', 'Verdana', sans-serif;
                    margin:0;
                    padding:75px 0 0 0;
                    text-align: left;
                    -webkit-text-size-adjust:none;       
                } 
                .ticket {
                    border: 3px solid #ddd;
                    border-radius: 30px;
                    overflow-y: visible;
                    overflow-x: auto;
                    width: 600px;
                    margin-bottom: 30px;
                    padding: 5px;
                    position: relative;
                    min-height: 150pt;
                }

                .ticket img {
                    float: left !important;
                    width: 200px;
                    height: 200px;
                }
            </style>
        </head>
        <body>
            <p>Test</p>

                <center>
                    <table class="ticket"><tr><td>
                        <img src="cid:qrcode_0" width="200" height="200" />
                    </td></tr></table>
                    <table class="ticket"><tr><td>
                        <img src="cid:qrcode_1" width="200" height="200" />
                    </td></tr></table>

                    <div class="ticket">
                        <img src="cid:qrcode_0" width="200" height="200" />
                    </div>
                    <div class="ticket">
                        <img src="cid:qrcode_1" width="200" height="200" />
                    </div>

                </center>
            </div>
        </body>
    </html>

--===============4631778948648796069==
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-ID: qrcode_0
MIME-Version: 1.0
Content-Disposition: inline

iVBOR...Jggg==

--===============4631778948648796069==
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-ID: qrcode_1
MIME-Version: 1.0
Content-Disposition: inline

iVBOR...RK5CYII=

--===============4631778948648796069==--

--===============1246061451293108858==--
...