Is it possible to implement the following logic usic HTML and CSS?

width: 100%;
height: 30% of width;

What I want to implement: If I decrease the width, the height will also decrease proportionally.
—

Padding %

This can be achieved by giving the element height:0 and padding-bottom:30%.

In all browsers, when padding is specified in %, it’s calculated relative to the parent element’s width. This can be a very useful feature for Responsive Design.

JSFiddle Demo

In the demo, the blue box at the top of the page is a single div. The height is responsive, and it can contain a variable amount of inline content without increasing the height. It tested fine in IE7/8/9/10, Firefox, Chrome, Safari, and Opera.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

Padding % and absolute position

If there are any problems with using a 0-height element, the demo also has a green box that’s implemented using a wrapper element and absolute position. Not sure if there are any advantages to this approach.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

This is now possible on modern browsers with vw and vh units:

width: 100vw;
height: 30vw; /* 30% of width */

Browser support: http://caniuse.com/#feat=viewport-units

—-

Also with JQuery, you could do:

$(window).ready(function () {
    var ratio = 3 / 10, $div = $('#my_proportional_div');
    $div.height($div.width() * ratio);
    $(window).bind('resize', function() { $div.height($div.width() * ratio); });
});

because the Padding % solution suggested doesn’t work with max/min-width and max-min height.

https://stackoverflow.com/questions/11535827/responsive-height-proportional-to-width/18164974