Responsive div with fixed aspect ratio dynamic child div

Responsive div with fixed aspect ratio dynamic child div

<a href="https://jsfiddle.net/0d5gq6yw/" target="_blank">Here</a>&nbsp;is a JSFiddle. I applied the&nbsp;<a href="https://www.w3schools.com/howto/howto_css_aspect_ratio.asp" target="_blank">padding trick</a>&nbsp;which works for horizontal resize. However, it doesn't work for vertical resize. In other words, I want the height of the yellow div to be a fixed percentage, say 15% of the container. But the aspect ratio of the yellow should stay fixed. So if I resize (downsize for instance) vertically, my goal is for the width of the yellow div to decrease as well as the height in order to: 1) maintain the aspect ratio. 2) maintain the percentage width&nbsp;<strong>and</strong>&nbsp;height of the yellow div. Is this possible without JavaScript? I'm fine with any CSS3 if available.

Here is a JSFiddle. I applied the padding trick which works for horizontal resize. However, it doesn't work for vertical resize. In other words, I want the height of the yellow div to be a fixed percentage, say 15% of the container. But the aspect ratio of the yellow should stay fixed. So if I resize (downsize for instance) vertically, my goal is for the width of the yellow div to decrease as well as the height in order to: 1) maintain the aspect ratio. 2) maintain the percentage width and height of the yellow div. Is this possible without JavaScript? I'm fine with any CSS3 if available.

Below is the code as well:

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>


html css css3

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Colorful Drop-Down Menu in HTML CSS | Drop-Down Menu in HTML CSS

Download File: https://drive.google.com/file/d/1PpbVEw_mSvUPfA0WqdgcKWSoc-VnqgqW/view?usp=sharing Want to create a Drop-Down Menu with HTML & CSS? Check out ...

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

An Introduction to HTML & CSS

At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and CSS, which styles the content.

How to write text on image in HTML CSS | Text on image in CSS

In this video tutorial, I am going to tell you how you can write some text on the image by using HTML and CSS. Here I use the CSS position attribute. Other P...