Отзывчивый div с фиксированным соотношением сторон, динамический дочерний div

Question

Здесь - это JSFiddle. Я применил трюк заполнения , который работает для горизонтального изменения размера. Тем не менее, это не работает для вертикального изменения размера. Другими словами, я хочу, чтобы высота желтого div была фиксированным процентом, скажем, 15% от контейнера. Но соотношение сторон желтого цвета должно оставаться неизменным. Поэтому, если я изменю размеры (например, уменьшу) по вертикали, моя цель - уменьшить ширину желтого элемента div, а также высоту, чтобы: 1) сохранить соотношение сторон. 2) поддерживать процентную ширину и высоты желтого деления. Это возможно без JavaScript? Я в порядке с любым CSS3, если доступно.

Ниже также приведен код:

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    width: 20%;
    padding-top: 10%;
    bottom: 0;
    position: absolute;
    left: 40%;
    /* height: 15%; of course this doesn't work */
} 

<div class="container">
  <div class="content"> 
        
  </div>
</div>

РЕДАКТИРОВАТЬ: Здесь это скрипка желаемого поведения с использованием jQuery. И вот код:

$(window).resize(function () {
    $(".content").height($(".container").height() / 5);
    $(".content").width($(".container").width() / 5);
    if ($(".content").width() / $(".content").height() < 3) {
        $(".content").height($(".content").width() / 3);
    }
    else {
        $(".content").width($(".content").height() * 3);
    }
    $(".content").css("left", ($(".container").width() - $(".content").width()) / 2);
}).resize();

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    bottom: 0;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content"> 
        
  </div>
</div>

Answer 1

Вы можете играть с медиа-запросами и размерами области просмотра.Что-то вроде:

// I used 15vw just as an example, you should do some maths and find the correct ratio/breakpoint
// this makes the box react to the horizontal resize
@media (min-width: 15vw) { 
  .content {
    height: 12vw;
    width: 28vw;
  }
}

// now, at that breakpoint, the box size depends on the viewport's height
@media (max-height: 15vw) {
  .content {
    height: 80vh;
    width: 185vh;
  }
}

https://jsfiddle.net/f76p5nsr/

Лично я бы попробовал использовать vh и vw для всех размеров этих блоков, это также поможет вам в математике.