设置所有等高的卡片 (mdbootstrap)

Posted 2023-03-21

【中文标题】设置所有等高的卡片 (mdbootstrap)

【英文标题】：Setting all cards of equal height (mdbootstrap)

【发布时间】：2019-07-26 13:57:24

【问题描述】：

我在我的 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"  
 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> 

如你所见，我已经尝试过给一个 cardimg 的 css 类并在其上应用 css

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

但这仍然不能解决我的问题

【问题讨论】：

您好，欢迎来到 SO。您可以在示例中添加代码 sn-p 吗？

【参考方案1】：

你需要从css下面移除object-fit:cover;

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