Create a div with an aspect ratio of 1: 1, knowing only its height in percent

Question

I was wondering if you can help me with this. I have a div (in white) where I need to put two round buttons (in green) on the borders. Everything needs to be done using CSS. It should look like this: Screenshot

Now the thing is, I don’t know the size of the white div, and I won’t know it at the time of creation, because after that it will be added to the DOM. All I know is that the white div has a percentage width and height relative to the future parent. Thus, at creation time, since it has not been added yet, any calls to width (), height () or its css values ​​will not work. I saw all these snippets that tell you how to make a div with a fixed aspect ratio. I need it now, I need the button to be 1: 1, but all I know about the dimensions is that it should be 100% of the height of the white div (and therefore its width should be equal to its height). All the examples I've seen assume that you know the width and that the height maintains the ratio. In my case, what I know is height (100%), and I want the width to be adapted. I do not know how to achieve this.

This is my snippet:

body{ background-color: #DCDCDC; } .container { width: 50%; height: 7%; background: white; border-radius: 20px; position: absolute; } .arrow { background: green; border-radius: 20px; height: 100%; position: absolute; } .arrow:after{ content: ""; display: block; padding-right: 100%; } .arrow:last-child { right: 0; } 

 <div class="container"> <div class="arrow"></div> <div class="arrow"></div> </div> 

https://jsfiddle.net/7bxecL9m/

If you know how I can do this without entering a fixed value (using jQuery, of course, really), I would really appreciate it.

Thanks.

Answer 1

There are many variables here:

• Since the height container is % , and the radius circle is px units, one of them is static and the other resizes.
• The only way to save 1: 1 with just html / css, given that the container height % will resize the circle to height , would make the circle div width and height highlight to something static, like px .
• Now, since you did not specify any fixed dimensions, the only thing I can think of is to comment out .arrow 100% height to prevent resizing other than 1: 1 and nesting the div inside .arrow to limit 1: 1 with static units (ideally, the impact on .arrow will be less code, but if you do not want / cannot install them in this element, you might consider this).

If you want the circle to remain round as the content expands, you need to dynamically adjust the height to fit the width. You can use Javascript to achieve this, but your border-radius bound to container in px static units, since the container will always be larger than border-radius: 50% will not work for both, 50% radius circle will never match 50 % container (i.e. if you need radius alignment).

 body { background-color: #DCDCDC; } body, html { height: 100%; } .container { width: 50%; height: 37%; background: white; border-radius: 20px; position: relative; } .arrow { background: green; border-radius: 20px; /*height: 100%;*/ position: absolute; overflow: hidden; } .bLimit { height: 40px; width: 40px; line-height: 40px; } .arrow:after { content: ""; display: block; padding-right: 100%; } .arrow:last-child { right: 0; } 

 <div class="container"> <div class="arrow"> <div class="bLimit">button overflow</div> </div> <div class="arrow"> <div class="bLimit">button</div> </div> </div> 

Answer 2

Why not make a fixed percentage width for your arrow:

 .arrow { background: green; border-radius: 20px; height: 100%; position: absolute; width: 10%; } 

Answer 3

 body{ background-color: #DCDCDC; } .container { width: 50%; height: 7%; background: white; border-radius: 20px; position: absolute; } .container:after,.container:before{ content: " "; display: block; padding: 4%; z-index: 999; top: 0; position:absolute; background: green; border-radius: 50%; } .container:before { left: 0; } .container:after{ right: 0; } 

 <div class="container"> </div> 

You can achieve using CSS pseudo selectors before and after . You will check this example .

Answer 4

It is possible to obtain this result using an image (which will not show) the desired relationship.

In this case, the ratio is 1: 1, so we will use a 50px image (but it can be of any size)

 .container { width: 300px; height: 20px; border: solid 1px blue; margin: 40px; position: relative; } .container:nth-child(2) { height: 40px; } .container:nth-child(3) { height: 60px; } .arrow { height: 100%; background-color: red; opacity: 0.5; position: absolute; border-radius: 50%; transform: translateX(-50%); } .arrow:last-child { right: 0px; transform: translateX(50%); } img { height: 100%; opacity: 0; } 

 <div class="container"> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> </div> <div class="container"> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> </div> <div class="container"> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> <div class="arrow"> <img src="https://placehold.it/50x50"> </div> </div>