Menu icon Foundation
Images in 3 columns are not being responsive

Zurb Ink

Global Width: 580px

 

I've got 3 columns, I put in an image on each of 300x300 but gave each image tag width="100%" so it should reduce down correct?

<img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">

The images are not responding, they are forcing outlook to show the full 300px width image and therefore breaking the layout of the entire email.

Pastebin of the entire code: https://pastebin.com/D82v8gNx

<row>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
</row>

Images should reduce down to the size of the columns they are in.

columnsResponsiveimage

Zurb Ink

Global Width: 580px

 

I've got 3 columns, I put in an image on each of 300x300 but gave each image tag width="100%" so it should reduce down correct?

<img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">

The images are not responding, they are forcing outlook to show the full 300px width image and therefore breaking the layout of the entire email.

Pastebin of the entire code: https://pastebin.com/D82v8gNx

<row>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/300x300" alt="" class="show-for-large" width="100%">
        </columns>
</row>

Images should reduce down to the size of the columns they are in.

Corey Schaaf over 2 years ago

Should be a simple fix. It's the way you are referencing the width of the images on the img tag itself. Try this instead. 

<row>
        <columns large="4">
            <img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/186x300" alt="" class="show-for-large"  width="187" height="187">
        </columns>
        <columns large="4">
            <img src="http://placehold.it/186x300" alt="" class="show-for-large"  width="187" height="187">
        </columns>
</row>

 

Foundation while responsive is not mobile first. It's desktop first. So what I would suggest is setting the images to the exact height and width of the container they are sitting inside of for desktop. I'm guessing, but at 580px, with gutters, that would mean your images are probably 187px x 187px (to maintain proportions). You need to specify the that height and width on the image. Note the height and width is needed to be compatible with older browsers otherwise you might get some weird stretching that isn't proportionate to the image. Also - don't use style="height:XXX; width:XXX;" that won't work. 

The images will "stretch" to 100% of the container on small.  That's the default behavior for Foudation for Emails. However, in some instances, (like when a 3 column format stacks on small devices) the actual image size needs to be as large as the viewport. If it's note, then you might end up with centered images with lots of padding on the left and right of the image.  It's a matter of preference I guess. 

The reason what you have above doesn't work is that you're telling the images to be 100% on desktop (which is 300px for each image - totally 900px total) when you really want to tell desktop the exact dimensions.   

Hope you find that helpful

     |
     |
     |
    \/