英文:
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.
.my-div{
height: calc(97vw / 75);
border-radius: 20px;
padding: 20px;
}
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 -->
.my-div{
height: 150px;
border-radius: 20px;
padding: 20px;
}
<!-- language: lang-html -->
<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>
<!-- 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
.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>
英文:
Use aspect-ratio property
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论