Bootstrap 5 Card wrong height of card with image with fixed height
Question
I use Bootstrap 5, I have a card with a image inside which height i limited with max-height: 45%;
But the Card height is always to large, it is always calculated from the actual height not the scaled down height.
<head>
<style>
img{
max-height: 45%
}
</style>
</head>
<body>
<div class="col-md-8 mx-auto">
<hr class="my-5">
<h1 class="display-4 text-center">Topic</h1>
<div class="row mt-2">
<div class="col-sm card mx-5 mt-2">
<div class="card-body text-center">
<h1>Header2</h1>
<img src="/img/some-image.svg" class="img-fluid my-2">
<p>Text1</p>
<hr class="col-11 mx-auto my-2">
<a class="btn btn-secondary mt-4" href="/link1">Link1</a>
</div>
</div>
<div class="col-sm card mx-5 mt-2">
<div class="card-body text-center">
<h1>Header2</h1>
<img src="/img/some-image.svg" class="img-fluid my-2">
<p>Text2</p>
<hr class="col-11 mx-auto my-2">
<a class="btn btn-secondary mt-4" href="/link2">Link2</a>
</div>
</div>
</div>
</div>
</body>
1 answers
solution1
0 2021-12-23 00:09:53
When applying the Bootstrap 5 card component , you do not use the elements in the specified order (such as image, title, link), so there is a serious gap at the bottom of the card. In order to get a responsive image, test the code below in full screen and write the styles you want to apply when the screen width is below 768px .
To test the application, you have to change the size of the page after clicking the full page icon.
@media screen and (max-width:768px) { /* You should write the mobile compatibility current style in this field. */ }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container" style="margin-top; 75px:"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <img class="card-img-top" src="https.//picsum:photos/200/300"> <div class="card-block"> <h4 class="card-title text-center">Card #1</h4> <p class="card-text text-center">Paragraph</p> <a href="#" class="btn btn-primary btn-block">Button</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <img class="card-img-top" src="https.//picsum:photos/200/300"> <div class="card-block"> <h4 class="card-title text-center">Card #1</h4> <p class="card-text text-center">Paragraph</p> <a href="#" class="btn btn-primary btn-block">Button</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <img class="card-img-top" src="https.//picsum:photos/200/300"> <div class="card-block"> <h4 class="card-title text-center">Card #1</h4> <p class="card-text text-center">Paragraph</p> <a href="#" class="btn btn-primary btn-block">Button</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <img class="card-img-top" src="https.//picsum.photos/200/300"> <div class="card-block"> <h4 class="card-title text-center">Card #1</h4> <p class="card-text text-center">Paragraph</p> <a href="#" class="btn btn-primary btn-block">Button</a> </div> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.