bootstrap-4 - 设置所有等高的卡片 (mdbootstrap)
问题描述
我在我的 Angular 项目中使用 mdbootstrap,所以当我在屏幕上显示多张卡片时,由于卡片图像的高度不同,它们的高度不同,如下面的链接所示:
这是代码
<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;
}
但这仍然不能解决我的问题
解决方案
您需要删除object-fit: cover; 从下面的CSS
.cardimg{ width: 100%; height: 50px; object-fit: cover; }
推荐阅读
- python - 我在哪里可以找到 pandas.pivot_table 中 aggfunc 的完整函数列表?
- excel - VBA 上大表的一般 ODBC 错误
- visual-studio - Live Server 在 Visual Studio Code 中不再可用,即使它显示为已安装
- python - Python GTK+ 3 - 无法在顶级小部件上设置父级
- python - 如果花无论如何都要拍摄快照,为什么要使用 redis 作为 celery 的后端?
- flutter - Flutter Plugin BETTER_PLAYER 通知点击什么也不做
- android - 反应原生 ERESOLVE 无法解析依赖树
- python - 如何知道哪个精灵与它的组中的子弹相撞?
- command-line - 试图将太多包含传递给 QA-C 失败
- yugabyte-db - 在 Kubernetes 集群中连接 YugabyteDB 时的 Gocql 配置问题