Question 170169 in Html Question posted in
Some basic documentation can be found here.

“How can I set the height of a div to match its width?”

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/[email protected]/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 ?

Tags:

3

Answers


  1. 0

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0 
    <style>
  .myDiv {
    width: 300px;
    padding-top: calc(97 / 75 * 100%);
    background-color: blue; /* Just for visualization */
  }
</style>

<div class="myDiv"></div>

    the width property is set to 300px, and the padding-top property is calculated using the desired aspect ratio (97 / 75) multiplied by 100%. By using 100% as the base reference, the padding-top value will be a percentage of the div’s width, effectively setting the height based on the aspect ratio.

    The calc() function allows for the calculation of the desired value. In this case, it multiplies the aspect ratio by 100% to get the desired height value.

    Login or Signup to reply.
  3. 0

    You can try this also

    <style>
  .myDiv {
    aspect-ratio: 97 / 75;
    width: 100vw;
    background-color: blue; /* Just for visualization */
  }
</style>

<div class="myDiv"></div>

    In this example, the aspect-ratio property is set to 97 / 75, which represents the desired aspect ratio. The width property is set to 100vw, where vw represents a percentage of the viewport width. This ensures that the div occupies the entire width of the viewport.

    By combining the aspect ratio and the viewport width, the height of the div will automatically adjust based on its width. The aspect-ratio property will maintain the desired aspect ratio, and the width property using 100vw will ensure it scales proportionally.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search