How to set the height of div according to width of the same div

Question

I want to find out height of the div according to the width of same div. I am using bootstrap to make the row and cols, according to the width of column, I want to set height of that column

I want to set an aspect ratio of 75:97 to that div.

.my-div{
   height: 150px;
   border-radius: 20px;
   padding: 20px;
}

<html lang="en">
   <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Here I am setting the height 150px but I want to set it according to width like If the width of div is 300px then height would be 97 * 300 / 75 as per the aspect ratio mentioned above

How can I achieve this by css ?

score 0 · Accepted Answer · answered May 17 '23 at 06:55

Use aspect-ratio property

.container {
  max-width: 1440px; // for demo
}
.my-div{
   /* min-height: 150px; */ // remove the minimum-height
   border-radius: 20px;
   padding: 20px;
}

.my-div > div {
  aspect-ratio: 75 / 97; // this will do the trick
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
      <div class="bg-dark h-100"></div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
      <div class="bg-dark h-100"></div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
      <div class="bg-dark h-100"></div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
      <div class="bg-dark h-100"></div>
    </div>
  </div>
</div>

How to set the height of div according to width of the same div

1 Answers1