gpt4 book ai didi

bootstrap-4 - 设置所有高度相同的卡片(mdbootstrap)

转载 作者:行者123 更新时间:2023-12-03 21:04:47 25 4
gpt4 key购买 nike

我在我的 Angular 项目中使用 mdbootstrap,所以当我在屏幕上显示多张卡片时,由于卡片图像的高度不同,它们的高度不同,您可以在下面给出的链接中看到:

https://ibb.co/NpqWy7z

代码如下

 <div class="col">
<mdb-card style="width:17rem;" class="c1">
<div class="view rgba-white-slight waves-light" mdbWavesEffect>
<mdb-card-img [src]="p?.imageurl" alt="Card image cap"
class="cardimg"></mdb-card-img>
<a>
<div class="mask"></div>
</a>
</div>
<mdb-card-body>
<mdb-card-title>
<h4>Card Title</h4>
</mdb-card-title>

<mdb-card-text> Some quick example text to build on the card title
content.
</mdb-card-text>

<a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
</mdb-card-body>
</mdb-card>
</div>

如您所见,我已经尝试提供一个 css 类 cardimg 并在其上应用 css

.cardimg{
width: 100%;
height: 50px;
object-fit: cover;
}

但这仍然没有解决我的问题

最佳答案

您需要从下面的 css 中删除 object-fit: cover;

.cardimg{ width: 100%; height: 50px; object-fit: cover; }

关于bootstrap-4 - 设置所有高度相同的卡片(mdbootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54997066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com