Hi, if I have a div and I watch to create a square div within it - I want the square width to be 100% of the div. Is there a way to match the height of the div to that width?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hello there Alistair,
I may have this wrong as it sounds a bit simplistic.
I made a section.
Inside a div background red (div1)
Inside that another div background blue (div2)
They were the same size.
I then made div1 width 500px
div 2 narrowed to that size
I made div 1 height 500px
div2 didnt change.
So I believe you kind of answered your own question,
Div2 (the one inside) make the height and width 100%
Then what ever the outer (div1 red) does the inside will expand to that size.
If that helps tick the heart and solution.
If I wrong let me know.
Hey, yes it’s simple when you use pixel value. But I mean when using percentages of any given div which it is in.
So in my example, I have a grid which is equally dividing my container into 3 parts. I want an image in the middle column, and I want the image to to be 100% of that column width. How do I ensure the height of that image matches that width?
Ive had a look at your preview and seems you have the settings correct.
I clicked on replace background image and each image fitted.
I resized the grid, it resized how I would expect it to.
So if its not doing what you want you will have to explain more.
Sorry maybe I didn’t explain properly, I want the image to be a square. That’s why I want the height of that image to match whatever the width is (which is 100% of the central column of the grid)?
Use image and it auto resizes. I just tried and it works fine.
Background images works differently.
If you want to use background still let me know and I have a play.
Ah ok, I actually want to use a background video. I was just using an image as a placeholder.
This seems to be the CSS answer: How to Create a Responsive Square with CSS
Not sure if it’s possible to implement using only Webflow
Ok got a lot more info to go on now 
For image use image but video background is much better than the other current option.
Let me have a play and nice find on the code for reference by the way.
I am not an expert but enjoy learning.
could you upload a small video so I can use your preview to play?
Let me know the file name etc.
Cheers
Thanks man, yes I also enjoy working these little things out.
Updated with a video to play with; //preview./preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=ec9e9cf99f2993e5208203623534af81&mode=preview
ok looking at it now.
Spent 2 hours on this, tried everyway I could think of.
You are going to have to add a px to the height of every break point on the video element.
From what I see its 100% width automatic so just the height.
Thanks mate, yes I think I will just have to stick to using pixel values at the moment. Thanks for your help on this
I’ve run into this issue before. What I do is create the main div, set it to relative.
Then I create a square SVG in Illustrator/Figma/similar. Make sure the SVG has no fill and no border.
Take that SVG and place it into the main div and give it a width of 100% so it always fills the full width of your main div.
Then I set the main div to whatever width I need for the design, I think in your example you stated you wanted it to be 100%, so set it to that. Then the main div will now expand as a square because of your SVG image, meaning the width will be equal to height.
Now that we have the right shape of our main div, add a new div inside the main div to hold your content, set it to absolute and width/heigh set to 100%. Make it flex if you want, but either way, now you can place content into this absolute positioned div, and it will always stay as a square, or width = height.
Hope this helps. Maybe you already tried this too haha, but just wanted to drop my thoughts. If you need any help implementing this, just let me know.
2 Likes
Thanks Michael, I tried absolute etc along the very same lines, what I didn’t do was think of a transparent image that we know the widget sizes correctly.
Brilliant work around.
1 Like
Thanks so much Michael! Brilliant workaround, just what I needed 
1 Like
@iDATUS @Alistair_Gallop I’m so glad it worked out and was what you needed. Have a good one!
This has been answered already but if anybody is looking for another approach you can achieve it using padding.
For example if you have a 500px wide square and wants it to be 500px tall, set padding-top to 100%.
That theoretically should work if you set width to 100vw instead or 100%.
Source: CSS-Tricks
3 Likes
This is genius. Thank you!