是否有任何解決方案可以使不同尺寸的影像在卡片上具有相同的高度？問題是內容來自 cms，我不知道影像大小將是多少以及卡片中將有多少文本。
<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Will be content...</div>
<a href="link" class="btn card-btn btn-outline-secondary"
role="button">Button</a>
</div>
</div>
</div>
這是它現在的樣子：
例子在這里
影像可能更高或更低。無法在 px 中修復它們。我需要那張卡片會拉伸，而不是使影像變短。
uj5u.com熱心網友回復：
在您的代碼中添加這些“
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" style="object-fit: contain;"
alt="image">
</div>
uj5u.com熱心網友回復：
試試這個代碼
.img-fluid {
height:400px;
object-fit-cover;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/342493.html
標籤：css 图片 bootstrap-5 图片尺寸
上一篇：image://前綴是什么？