How to Set the Height of a Div Based on a Percentage-Based Width

Can I set the height of a div based on a percentage-based width?

This can be done with a CSS hack (see the other answers), but it can also be done very easily with JavaScript.

Set the div's width to (for example) 50%, use JavaScript to check its width, and then set the height accordingly. Here's a code example using jQuery:

$(function() {    var div = $('#dynamicheight');    var width = div.width();        div.css('height', width);});
#dynamicheight{    width: 50%;        /* Just for looks: */    background-color: cornflowerblue;    margin: 25px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dynamicheight"></div>

Can I program the div height to be a certain percentage of it's current width?

There's the padding trick, already answered, but I use another approach, envolving two nested divs.

The parent one, I set the width. The child one, I use the height value as a container unit vw - (means viewport width).

It works well, see here (resize the viewport)

<div>
<div></div>
</div>

CSS:

div {
width: 100%;
}

div > div {
background: silver;
height: 10vw;
}

Setting div height based on its width

HTML:

<div class='box'> 
<div class='content'>All your content are belong to us</div>
</div>

We use two block elements to achieve the desired behaviour, box for width, content for height.

CSS:

.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /*What you want the height to be in relation to the width*/
}

The Content:

Then set the content to cover the entire box absolutely so no matter the size, it fits!

.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

Tada you are done...

SOURCE: Pure CSS

Set height to percent of width?

It can be done CSS only:

#sheet {
position: relative;
padding-top: 50%; /* Your percentage */
}
#sheet > img {
position: absolute;
height: 100%;
left: 0;
top: 0;
}

DEMO

It works because if you use a percentage in padding-top, it is relative to width. Then, you can use padding instead of height, using position: absolute to children in order to have a 0px tall parent.

How to set div height as percentage of CSS width in jQuery?

You can change your code to this: