Responsive height proportional to width

Question

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 decrea

Answer 1

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.