На основе ваших решений я сделал несколько трюков:
Когда вы его используете, ваш HTML будет только
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Чтобы использовать его таким образом, выполните: CSS:
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
и js (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
И имея это, вы просто устанавливаете attr data-keep-ratio
на высоту / ширину и все.