Menu icon Foundation
Image size in Outlook

Dear Zurb team,

this being my first post, I would first like to thank you and congratulate you for an excellent e-mail framework. I have coded many e-mail newsletters for clients and Ink has made my work that much more fun and productive.

Now, there seems to be a problem with the way some versions of Outlook handle images contained in columns, less than twelve wide. Those images are scaled down, although fixed width and height is set.

Example:

<table class="container">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="eight columns">
                            <tr>
                                <td>
                                    <p class="lead">Beispiel: Überschriften sind wichtig für die Unterteilung von langen Texten</p>
                                    <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst.
                                        Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis
                                        dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last ">
                        <table class="four columns hide-for-small">
                            <tr>
                                <td>
                                    <img src="http://placehold.it/150x150" width="150" height="150" alt="Placehold.it" style="width:150px;height:150px">
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

            

         

This is what it looks like in the Mailchimp editor:

Bildschirmfoto 2016 01 21 um 17.11.19

This is what it looks like in Outlook 2000, Outlook 2002 & Outlook 2003:

Bildschirmfoto 2016 01 21 um 17.29.12

I have tried to fix this issue through custom CSS in every I could think. Finally, the solution to this problem was to simply delete the below the image .

<table class="container">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="eight columns">
                            <tr>
                                <td>
                                    <p class="lead">Beispiel: Überschriften sind wichtig für die Unterteilung von langen Texten</p>
                                    <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst.
                                        Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis
                                        dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last ">
                        <table class="four columns hide-for-small">
                            <tr>
                                <td>
                                    <img src="http://placehold.it/150x150" width="150" height="150" alt="Placehold.it" style="width:150px;height:150px">
                                </td>                                
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

            

         

I have yet to find another solution.

Any ideas?

Thanks again for your awesome work! I am very much looking forward to Ink v2!

best
ed

OutlookimagesSizescaleexpander

Dear Zurb team,

this being my first post, I would first like to thank you and congratulate you for an excellent e-mail framework. I have coded many e-mail newsletters for clients and Ink has made my work that much more fun and productive.

Now, there seems to be a problem with the way some versions of Outlook handle images contained in columns, less than twelve wide. Those images are scaled down, although fixed width and height is set.

Example:

<table class="container">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="eight columns">
                            <tr>
                                <td>
                                    <p class="lead">Beispiel: Überschriften sind wichtig für die Unterteilung von langen Texten</p>
                                    <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst.
                                        Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis
                                        dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last ">
                        <table class="four columns hide-for-small">
                            <tr>
                                <td>
                                    <img src="http://placehold.it/150x150" width="150" height="150" alt="Placehold.it" style="width:150px;height:150px">
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

            

         

This is what it looks like in the Mailchimp editor:

Bildschirmfoto 2016 01 21 um 17.11.19

This is what it looks like in Outlook 2000, Outlook 2002 & Outlook 2003:

Bildschirmfoto 2016 01 21 um 17.29.12

I have tried to fix this issue through custom CSS in every I could think. Finally, the solution to this problem was to simply delete the below the image .

<table class="container">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="eight columns">
                            <tr>
                                <td>
                                    <p class="lead">Beispiel: Überschriften sind wichtig für die Unterteilung von langen Texten</p>
                                    <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst.
                                        Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis
                                        dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last ">
                        <table class="four columns hide-for-small">
                            <tr>
                                <td>
                                    <img src="http://placehold.it/150x150" width="150" height="150" alt="Placehold.it" style="width:150px;height:150px">
                                </td>                                
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

            

         

I have yet to find another solution.

Any ideas?

Thanks again for your awesome work! I am very much looking forward to Ink v2!

best
ed

Rafi Benkual over 3 years ago

Thanks for the kind words!

Foundation for Emails 2 is going to be a game changer!

Looking at your markup, it looks right. Having the height and width set as attributes is helpful. The Style tag is not needed but shouldn't hurt. Can you try without that?

Corey Schaaf over 3 years ago

Ed, I talk about this same problem here. It might be helpful for you:
http://foundation.zurb.com/forum/posts/37825-email-in-outlookcommobile