automatic adjustment of div height given absolute value with css

Question

I'm trying to make a square on all devices with CSS, but unfortunately it doesn't work because I'm using % instead of px. I have searched for this situation in many places on the internet, but all the results I have found use px or cm values. Could someone with knowledge help with this? Thank you.

css:

div{
position: absolute;
top: 0;
left: 0;
width: 5%;
height: auto;
border: 1px solid #000;
text-align: center;
}

score 0 · Accepted Answer · answered Oct 25 '22 at 18:13

If you add aspect-ratio: 1 to your css it will be shown as a square.

I have created a small example for you:

.example {
  position: absolute;
  top: 0;
  left: 0;
  width: 5%;
  height: auto;
  border: 1px solid #000;
  text-align: center;
  aspect-ratio: 1;
  background-color: purple;
}

<div class="example"></div>

automatic adjustment of div height given absolute value with css

1 Answers1