How do I match a div height to it's width when using percentages

Design help General
1

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)

2

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.

3

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?

Read only link: https://preview.webflow.com/preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=ec9e9cf99f2993e5208203623534af81&pageId=5f5e063b95ee60a95b11db46&mode=preview

4

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.

5

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)?

6

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.

7

Ah ok, I actually want to use a background video. I was just using an image as a placeholder.

8

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

9

Ok got a lot more info to go on now :wink:
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.

10

could you upload a small video so I can use your preview to play?
Let me know the file name etc.
Cheers

11

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

12

ok looking at it now.

13

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.

14

Thanks mate, yes I think I will just have to stick to using pixel values at the moment. Thanks for your help on this

15

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
16

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
17

Thanks so much Michael! Brilliant workaround, just what I needed :slight_smile:

1 Like
18

@iDATUS @Alistair_Gallop I’m so glad it worked out and was what you needed. Have a good one!

19

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
20

This is genius. Thank you!