Proportionally resize width and height of div on window resize

css, html, javascript, jquery

Solution

I found the answer myself.

HTM:

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

CSS:

.parent {
    position: relative;
    width:1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
}
.parent:before {
    margin-top: 25%;
    content: '.';
    font-size: 0;
    display: inline-block;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    max-height: 100%;
}

The interesting part in the code is the margin-top of the .parent:before selector. By this you can adjust the basic height of the div. Here is the jsfiddle - http://jsfiddle.net/ndzCL/

It is not the perfect solution but it is simple and use only CSS.

Thanks everyone for the help :)

Problem

Couple of days I am trying to make a div re-size like an image(proportionally). For example If I have a div with dimensions 500x140, I want it on a browser re-size to react like an image that has width="100%". I find out a similar questions but they didn't work for me. Is there a way to do that(without using a dummy image)? EDIT: p.s. Sorry for my bad English.

Original source