设置 div 的高度以根据相同 div 的宽度进行调整。

huangapple
go评论81阅读模式
英文:

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

问题

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.

  1. .my-div{
  2.    height: calc(97vw / 75);
  3.    border-radius: 20px;
  4.    padding: 20px;
  5. }

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 ?

英文:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .my-div{
  2.    height: 150px;
  3.    border-radius: 20px;
  4.    padding: 20px;
  5. }

<!-- language: lang-html -->

  1. &lt;html lang=&quot;en&quot;&gt;
  2.    &lt;head&gt;
  3.       &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  4.    &lt;/head&gt;
  5.    &lt;body&gt;
  6.       &lt;div class=&quot;container&quot;&gt;
  7.       &lt;div class=&quot;row&quot;&gt;
  8.          &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  9.             &lt;div class=&quot;bg-light h-100&quot;&gt;&lt;/div&gt;
  10.          &lt;/div&gt;
  11.          &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  12.             &lt;div class=&quot;bg-light h-100&quot;&gt;&lt;/div&gt;
  13.          &lt;/div&gt;
  14.          &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  15.             &lt;div class=&quot;bg-light h-100&quot;&gt;&lt;/div&gt;
  16.          &lt;/div&gt;
  17.          &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  18.             &lt;div class=&quot;bg-light h-100&quot;&gt;&lt;/div&gt;
  19.          &lt;/div&gt;
  20.       &lt;/div&gt;
  21.    &lt;/div&gt;
  22.    &lt;/body&gt;
  23. &lt;/html&gt;

<!-- end snippet -->

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 ?

答案1

得分: 0

Use aspect-ratio property

  1. .container {
  2.   max-width: 1440px; // for demo
  3. }
  4. .my-div{
  5.    /* min-height: 150px; */ // remove the minimum-height
  6.    border-radius: 20px;
  7.    padding: 20px;
  8. }
  10. .my-div > div {
  11.   aspect-ratio: 75 / 97; // this will do the trick
  12. }
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  2. <div class="container">
  3.   <div class="row">
  4.     <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
  5.       <div class="bg-dark h-100"></div>
  6.     </div>
  7.     <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
  8.       <div class="bg-dark h-100"></div>
  9.     </div>
  10.     <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
  11.       <div class="bg-dark h-100"></div>
  12.     </div>
  13.     <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-div">
  14.       <div class="bg-dark h-100"></div>
  15.     </div>
  16.   </div>
  17. </div>
英文:

Use aspect-ratio property

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .container {
  2.   max-width: 1440px; // for demo
  3. }
  4. .my-div{
  5.    /* min-height: 150px; */ // remove the minimum-height
  6.    border-radius: 20px;
  7.    padding: 20px;
  8. }
  10. .my-div &gt; div {
  11.   aspect-ratio: 75 / 97; // this will do the trick
  12. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3.   &lt;div class=&quot;row&quot;&gt;
  4.     &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  5.       &lt;div class=&quot;bg-dark h-100&quot;&gt;&lt;/div&gt;
  6.     &lt;/div&gt;
  7.     &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  8.       &lt;div class=&quot;bg-dark h-100&quot;&gt;&lt;/div&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  11.       &lt;div class=&quot;bg-dark h-100&quot;&gt;&lt;/div&gt;
  12.     &lt;/div&gt;
  13.     &lt;div class=&quot;col-12 col-sm-6 col-md-4 col-lg-3 my-div&quot;&gt;
  14.       &lt;div class=&quot;bg-dark h-100&quot;&gt;&lt;/div&gt;
  15.     &lt;/div&gt;
  16.   &lt;/div&gt;
  17. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月17日 13:52:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76268914.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定