Setting element height in responsive layout?

Update: 2022

You can use aspect-ratio css property to achieve this.

Codepen example: https://codepen.io/chriscoyier/pen/rNOqdJd

Old solution

Usually having a fluid padding-bottom on the parent container solves this problem.

More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

update: on js bin http://jsbin.com/obesuk/1/

markup :

<div class="obj-wrapper">
 <div class="content">content</div>
</div>

css:

  .obj-wrapper {
    position:relative;
    width:50%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
  }