SparkPost / heml

HEML is an open source markup language for building responsive email.
https://heml.io
MIT License
4.33k stars 157 forks source link

Outlook 2017 image height problem #55

Open doggy8088 opened 6 years ago

doggy8088 commented 6 years ago

Here is the steps to reproduce the problem:

  1. Create a HEML template and save as email.heml filename:
<heml>

    <head>
        <style>
            body {
                background: white;
            }

            h1 {
                color: DarkViolet;
            }

            strong {
                color: red;
            }

            container {
                max-width: 700px;
                margin: 10px auto;
                padding: 10px 20px;
            }

            button {
                background: CornflowerBlue;
                margin: auto;
            }

            column {
                padding: 0 10px;
            }
        </style>
    </head>

    <body>
        <container>
            <p>
                Section 1
            </p>
            <p>
                <a href="http://bit.ly/UdemyVS2017Go" target="vs2017go"><img src="https://user-images.githubusercontent.com/88981/34461102-17571f88-ee5d-11e7-9f26-bc97c6ae1259.png" width="100%"></a>
            </p>
            <p>
                Section 2
            </p>
            <p>
                <img src="https://user-images.githubusercontent.com/88981/34461104-1ae3e42e-ee5d-11e7-9c40-88e026fb9304.png" width="100%">
            </p>
            <p>
                Section 3
            </p>
            <p>
                <img src="https://user-images.githubusercontent.com/88981/34461106-1f649e58-ee5d-11e7-9a93-437cedc9453c.png" width="100%">
            </p>
            <p>
                <a href="https://www.udemy.com/linq-csharp"><img src="https://user-images.githubusercontent.com/88981/34460944-97d8bdec-ee58-11e7-86c3-e6090f12ba32.png" width="100%"></a>
            </p>
            <p>
                Footer
            </p>
        </container>
    </body>
</heml>
  1. Build HEML

    heml build email.heml

  2. Send email using email.html and get email by using Outlook 2017.

  3. Then you will get the result just like below:

image

All the images has been cut-off on height.

Workaround

Right now, I'm using this to solve problem temporary. I hope this workaround can add to HEML.

Thanks!

avigoldman commented 6 years ago

Thanks for reporting and sharing the fix!