How to make HTML element height to be 1/2 of its width?

Question

I am trying to achieve this result, and have no clear idea how to do, but to resize element in javascript.

Are there any options to do so in SASS/CSS?

I found this npm package:

https://www.npmjs.com/package/sass-proportions.

But asking, in case anyone know any better/simple way?

?? https://stackoverflow.com/questions/24330420/is-there-a-way-to-get-the-set-width-of-the-current-element-in-sass — epascarello, Jan 11 '18 at 21:55
I've coded a lot of stuff like this. You can't detect screen width in PHP. And CSS can't change the size of an element once the code has been loaded. You have to detect the width of the browser with javascript and then divide by 2, then change the width attribute of the container with an onload function. — Michael d, Jan 11 '18 at 21:59
@epascarello, yeah, this may work well with px, but if I want to use percentage. Say 80% of the screen. — Andrey Ruzhentsev, Jan 11 '18 at 22:03
Actually, it seems to be possible to make with vw in some case. :) — Andrey Ruzhentsev, Jan 11 '18 at 22:06
E.g. width: 90vw; height: 45vw; Have not found any bottlenecks with it yet.... — Andrey Ruzhentsev, Jan 11 '18 at 22:06
Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — Gershom Maes, Jan 11 '18 at 22:15

score 2 · Answer 1 · answered Jan 11 '18 at 22:35

This is easily achieved with only HTML and CSS

I attached a CodePen reference. View here

You will need 3 boxes

<div class="wrapper">
  <div class="ratio-box">
    <div class="content">I am a div that mantains its aspect ratio</div>
  </div>
</div>

The wrapper box has a defined width, which is your element's width":

.wrapper {
  width:  200px; 
}
.ratio-box {
  width:  100%;
  padding-bottom:  50%; 
  position:  relative; 
}
.content {
  height:  100%; 
  width:  100%; 
  position:  absolute; 
  top:  0; 
  left:  0; 
}

This works because the padding-bottom property is relative to the width property of its parent element.

Want a specific aspect ratio?

For a 2:1 aspect ratio, use padding-bottom: 50%;

For a 16:9 aspect ratio, use padding-bottom: 56.25%;

For a 9:16 smartphone aspect ratio, use padding-bottom: 177.78%;

How to make HTML element height to be 1/2 of its width?

1 Answers1