示例:卡片×3按钮(五)
感谢 darcyc 大佬的指点;
给IMG加了个style尾巴:style="height:330px ; object-fit: cover;">
这样就可以让图片自适应比例,并且限制了最高像素;
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/213736_202824_2.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/215027_202824_2.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://files.getquicker.net/_sitefiles/_guides/ead85b98-49f5-4e73-3000-08d9b733fc81/2021/12/12/181421_202824_4.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>