欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何根據同一div的寬度設置div的高度[重復]

CSS
傅智翔2年前8瀏覽0評論

我想根據同一格的寬度找出格的高度。 我正在使用bootstrap來制作行和列，根據列的寬度，我想設置該列的高度

我想將該div的縱橫比設置為75:97。

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

<html lang="en">
   <head>
      <link  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>

使用縱橫比屬性

.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  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>