Menu icon Foundation
Ink: Image resize not working!

We're trying to resize images in Zurb Ink.

So in theory, the first should take the huge image and bring it to 260px, and the latter should take the small 100x size image and resize to 260px too. Yet neither work in most versions of Outlook (shock).

Please help!

Doug

<td style="min-width:260px;max-width:260px;">
<img class="center" style="width:100%; height:auto;" width="260" height="260" src="http://placehold.it/1000/" />

<td style="min-width:260px;max-width:260px;">
<img class="center" style="width:100%; height:auto;" width="260" height="260" src="http://placehold.it/100/" />

inkResponsiveOutlookimagesresize

We're trying to resize images in Zurb Ink.

So in theory, the first should take the huge image and bring it to 260px, and the latter should take the small 100x size image and resize to 260px too. Yet neither work in most versions of Outlook (shock).

Please help!

Doug

<td style="min-width:260px;max-width:260px;">
<img class="center" style="width:100%; height:auto;" width="260" height="260" src="http://placehold.it/1000/" />

<td style="min-width:260px;max-width:260px;">
<img class="center" style="width:100%; height:auto;" width="260" height="260" src="http://placehold.it/100/" />
herrreiprich over 4 years ago

Responsive resizing works only in one direction: Browsers and Mail Clients can scale images down but not up (an upscaled image would look crappy and blurred).

Rafi Benkual over 4 years ago

Images have max-width: 100%; by default and they scale proportionally. The height is not styled, so it's auto. http://codepen.io/rafibomb/pen/rabrVE

Maybe add you template in the above codepen so we can help you more.

Doug Dennison over 4 years ago

Ok, retested with your line of code, and this shows:

https://litmus.com/tests/22076523/versions/5/results#ol2003-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2007-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2013-full_on

Yes its the spacing, mostly to the sides of the boxes

Your code didn't have wrapper last on the whole thing so i added that, but with or without it the same thing happened.

Doug Dennison over 4 years ago

Anything we can do?

Doug Dennison over 4 years ago

Thanks herrreiprich, good to know.

The resizing from large to small however is still an issue, do you have any code you've used in Ink that works?

Doug Dennison over 4 years ago

<img style="width:100%; height:auto;" width="580" height="300" src="http://placehold.it/1160x600/" />

The above code breaks in Outlook 2003

herrreiprich over 4 years ago

I need more details about the issue at this point.

Doug Dennison over 4 years ago

Trying to add 2 responsive columns, with 2 sub columns in each and so far have the code below, yet this appears different in each outlook! Needs to be centred.

<table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns text-pad center" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns text-pad center">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns center text-pad" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns center text-pad last">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

Rafi Benkual over 4 years ago

It's still hard to tell what the issue is. Are you referring to the gap in between the two sets of images?

If so, you should use twelve columns to wrap the sub-columns. Like this http://codepen.io/rafibomb/pen/pJKyGM?editors=110