Is there a way to dynamically adjust the height of a div based on its width using CSS and Bootstrap?
I am looking to maintain an aspect ratio of 75:97 for the height and width of the div.
.my-div{
height: auto;
border-radius: 20px;
padding: 20px;
}<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7d70706b6c6b6b676e4e2f5f2a312f31">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
<div class="bg-light h-100"></div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
<div class="bg-light h-100"></div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
<div class="bg-light h-100"></div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
<div class="bg-light h-100"></div>
</div>
</div>
</div>
</body>
</html>To achieve this, rather than setting a fixed height like 150px, I want to calculate the height based on the width according to the aspect ratio defined (97 * width / 75).
Are there any CSS techniques that can help accomplish this dynamic height adjustment?