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
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
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?
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.
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â.
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.
Ah that work so much better! I need to start looking at the bottom of settings lol
Thank you!
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.