Generate a div with a 1:1 aspect ratio using only its height specified in a percentage

Question

Generate a div with a 1:1 aspect ratio using only its height specified in a percentage

Can you assist me with this task? I have a white div where I need to place two circular green buttons on the borders. The entire layout should be created using CSS. Here is an example of how it should look: Screenshot

The challenge is that I do not know the size of the white div upfront, as it will be added to the DOM dynamically with a percentage-based width and height relative to its parent. This means that traditional methods like width(), height(), or accessing CSS values directly won't work during creation. I've come across solutions for fixed aspect ratios in divs, but they all rely on knowing one dimension to calculate the other. In my case, I only know the height (100%) and want the width to adapt accordingly. How can I achieve this?

Here is the code snippet I am working with:

LINK TO CODE SNIPPET

If you have any insights on achieving this without hardcoded values (and jQuery, if necessary), I would greatly appreciate your help. Thank you.

javascript jquery html css

Answer 1

Answer №1

There are several factors at play in this scenario:

The container's height is set in percentage while the circle's radius is in pixels, resulting in one being static and the other resizing accordingly.
To maintain a 1:1 ratio using only HTML/CSS without fixed dimensions, it would be necessary to isolate the circle's div width and height with static units like pixels.
If fixed dimensions are not allowed, an alternative approach could involve commenting out the arrow's height at 100% to prevent resizing and nesting a div inside the arrow to maintain a 1:1 ratio with static units.

In order for the circle to remain circular as the content expands, the height should dynamically adjust to match the width. Using JavaScript can achieve this, but the border-radius is tied to the container in static pixel units.

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

There are several factors at play in this scenario:

The container's height is set in percentage while the circle's radius is in pixels, resulting in one being static and the other resizing accordingly.
To maintain a 1:1 ratio using only HTML/CSS without fixed dimensions, it would be necessary to isolate the circle's div width and height with static units like pixels.
If fixed dimensions are not allowed, an alternative approach could involve commenting out the arrow's height at 100% to prevent resizing and nesting a div inside the arrow to maintain a 1:1 ratio with static units.

In order for the circle to remain circular as the content expands, the height should dynamically adjust to match the width. Using JavaScript can achieve this, but the border-radius is tied to the container in static pixel units.

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 3

Answer №2

Have you considered using a percentage-based fixed width for your arrow design instead?

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

Answer 4

Have you considered using a percentage-based fixed width for your arrow design instead?

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

Answer 5

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 style the container using the CSS pseudo selectors before and after. Here is an example for reference: Example.

Answer 6

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 style the container using the CSS pseudo selectors before and after. Here is an example for reference: Example.

Answer 7

Answer №4

If you wish to achieve this outcome, consider utilizing an image of the required aspect ratio that remains hidden from view.

For example, if the ratio is 1:1, you can employ an image with dimensions of 50px (although any size will suffice).

.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>

Answer 8

If you wish to achieve this outcome, consider utilizing an image of the required aspect ratio that remains hidden from view.

For example, if the ratio is 1:1, you can employ an image with dimensions of 50px (although any size will suffice).

.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>

Generate a div with a 1:1 aspect ratio using only its height specified in a percentage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Customize the active text color of breadcrumbs in Bootstrap

Creating a function inside of setInterval does not refresh

How can a variable be exported from a React component?

Discovering a full class entity within an array using Javascript

Harness the power of multiple backgrounds with just one CSS style!

Challenge with collapsing a button within a Bootstrap panel

AngularJS version 1.2.0 is experiencing an issue where the $http service is not properly sending requests

I am having trouble getting Google Maps to load

Flex container has images stretched, but align-self-center cannot be utilized

Implementing automatic token refreshing and automatic logout features in Vue

Setting a JavaScript value for a property in an MVC model

Issues with npm installation

Does Google's web crawler have the ability to index content created by javascript?

How to include a listview in the footer navbar using jQuery Mobile

When using a routerlink in an a tag with Bootstrap 4, the navigation tab functionality may not work as expected

Centered Alignment for Bootstrap Carousel Captions

Modifying selections within a select box generated dynamically using JQuery

Check the box to show the corresponding sections of the form

Struggling to extract a specific value from a JSON string?

Is it possible to iterate and add an array to another array using a loop?