1

I have tried this and not working.

div {
    background:orange;
    height:20%;
    padding-left:20%;
}

the width become related to the window width in percent. I want to make width equal to height in a percent value,and doing that with css only.

here where I got that

any help please.

Community
  • 1
  • 1
phoenix
  • 351
  • 4
  • 11

1 Answers1

1

Provided you are ok to change the markup, you can add another div and achieve this with a bit of pseudo-elements added. Used the below markup.

<div class="parent">
 <div class="child"></div>
</div>


div.child {
  background: orange;
  height: 20%;
  margin-right: 80%;
}
.child:after {
  content: "";
  display: block;
  padding: 50% 0%;
}
div.parent {
  width: 100%;
  height: 100%;
}
<div class="parent">
  <div class="child"></div>
</div>
semuzaboi
  • 4,972
  • 5
  • 20
  • 35
  • There's a typo in your `div.parent` CSS: `height: 100%:` should be `height: 100%;` with a semicolon at the end, but even then it seems the height is entirely irrelevant... – S.B. Apr 25 '20 at 20:00