What the best way to resize an image foundation stack?


(Bill Fleming) #1

I tried resizing image by putting foundation image stack inside 1 column foundation then tried to use padding or margin but it only pushes the other column outward. I want it to push and shrink the image .

Is there a trick to resizing images in stacks?

Thank you


(Jason Bostick) #2

Not totally sure if this is what you’re after but, in Foundation you can choose to ‘grow to container width’ as an option as well as set a max width. That way it’ll fill the container up to the point that you don’t want it to grow any more


(Bill Fleming) #3

I think I got it now. I am still bit new to responsive coding.

I was trying to keep image to the size that I wanted it to be. At first I create an image at the size that I expect it to be at on a website then it would grow larger in size to fill in the foundation column.

I spent most of my time looking at the foundation layout column setting and trying to use padding to adjust the size of the image but I wasn’t having much luck until after reading your post got me thinking I never checked the image setting!!

Now, I noticed that there is a layout setting under image too. slap his forehead

Thank you

I got a question about “fixed” size - is it still responsive or I have to create two fixed size one for desktop and one for mobile then set it to hide?


(Jason Bostick) #4

Just because I’m going off my foggy memory and not at my RW computer… When you say ‘fixed’ size, do you mean the ‘Actual height/actual width’ settings that you get when you click ‘Preload?’ Those are still responsive, it is just meant to preload the space for the image to prevent the page from shifting around when the text and layout is loaded before the image is. But it will scale up or down as the browser size changes.

If you mean the ‘fixed image’ tick box that you sometimes see as a stack option, that is for keeping a background image in place while the content scrolls over top of it.


(Bill Fleming) #5

The “fixed” that I am talking about is located under the layout setting in foundation image stack

When I place an image in foundation column and no matter what size the image is, it will fill in the whole foundation column even if the actual image size is smaller than the foundation column. Now I realized that I can set it to fixed pixel to the actual image size and it will no longer try to fill the foundation column but when in smaller screen the image doesn’t resize itself and stay at fixed size unless I am looking at it the wrong way.

What I am trying to do is to keep the image no bigger than it actual size but still responsive in smaller screen display. Like a “maximum width size for image”.


(Jason Bostick) #6

Ah, I think we’re talking about different settings areas. I’m referring to the settings towards the bottom. I think in your case, you’d leave the layout setting to fill. Then towards the bottom, set a max width for your image (what you don’t want it to grow larger than), and then also tick (grow to size of container). That should shrink it down on smaller screens.


(Bill Fleming) #7

Ah that work so much better! I need to start looking at the bottom of settings lol

Thank you!


(system) #8

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.