【发布时间】：2019-08-16 11:11:29
【问题描述】：
需要在引导程序 4 上对齐卡片组内的所有高度图像，而无需通过高度进行调整，因为响应式工作已经很好了。
我附加了一个 sn-p，您可以在其中看到我的问题，卡片的高度都相同，但图像的高度不同，我知道以前有人问过这个问题，但找不到一个好的解决方案。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
第四张图片未加载..图片路径错误..图片不在文件中
-
你想要所有的图片都一样高吗？
-
@Manikandan2811 图片来自谷歌，你可以得到你想要的任何东西，是的，我不想让所有图片都具有相同的高度，但不使用 height:100px 或 height:10vw 等，因为我想要提供引导程序的响应式
-
您需要设置卡片中图片的高度。
-
ok.. 我可以在不使用响应的高度的情况下提供备用代码吗？
标签： html css bootstrap-4