由于响应式工作良好，需要在引导程序4的卡座内对齐所有高度图像，而无需通过高度对其进行调整。
我附上了一个片段，您可以看到我的问题，卡片的高度都相同，但是图像却不一样，我知道这个问题之前曾有人提出过，但是找不到一个好的解决方案。
<!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>
答案 0 :(得分：2)
我认为您应该将所有图像放在div标签内。然后，给那个高度分配相同的高度。
<!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">
<div class="my-auto" style="height: 100%">
<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>
<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">
<div class="my-auto" style="height: 100%">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="..."></div>
<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">
<div class="my-auto" style="height: 100%">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</div>
<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">
<div class="my-auto" style="height: 100%">
<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>
<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>
最好将所有图像设计为相同高度。它可以解决您的问题
答案 1 :(得分：1)
如果需要以相同的高度对齐图像，则所有图像的宽度和高度都应相同。 “或”，我们还可以将我下面的内容对齐：
.card-deck .card .card-img {
background-size:cover;
background-position:top center;
height:120px;
}
.card-deck .card .card-img img{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<div class="card-img">
<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>
<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">
<div class="card-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<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>
<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>SELECT
正如我提到的那样，通过将该图像作为背景图像来完成..如上例所示 请检查上面的代码。...让我知道是否需要任何更改
答案 2 :(得分：0)
<!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">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</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>
<script>
//If using jquery
var imageWidth = $('.card-img-top').width();
$('.card-img-top').css('height', imageWidth + 'px');
//If using javascript
var imageWidth = document.getElementsByClassName('card-img-top');
for(var i=0; i<imageWidth.length;i++){
imageWidth[i].style.height = imageWidth[i].width + "px";
}
</script>
</html>
答案 3 :(得分：0)
尝试此代码。
HTML
<!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">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
<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">
<div class="image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP);"></div>
<img src="" 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">
<div class="image" style="background-image: url(https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg);"></div>
<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">
<div class="image" style="background-image: url(https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000);"></div>
<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>
css
.card .image {
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 66.6%;
background-position: center;
}
答案 4 :(得分：0)
如果您不需要图像的长宽比，则可以在CSS中使用以下代码：
.card-img-top: {height:250px}
答案 5 :(得分：0)
高度尝试！
.card-img{
overflow:hidden;
display:flex;
height:200px;
justify-content:center
}
.card-img img{
height:100%;
width:auto
}
@media(max-width:568px){
.card-img{
height:auto
}
.card-img img{
height:auto !important;
width:100%;
}
}<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">
<div class="card-img">
<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>
<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">
<div class="card-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="..."></div>
<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">
<div class="card-img"><img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="..."></div>
<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">
<div class="card-img"><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>
<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>
答案 6 :(得分：-1)
希望以下代码会有所帮助。我添加了带有thumb_container类的图形标签来包装img标签。
<!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">
<style>
figure.thumb_container{
margin: 0 0 1rem;
padding: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: auto;
background: transparent;
overflow: hidden;
position: relative;
padding-top: 100%;
}
img {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: block;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<figure class="thumb_container">
<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="...">
</figure>
<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">
<figure class="thumb_container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
</figure>
<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">
<figure class="thumb_container">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</figure>
<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">
<figure class="thumb_container">
<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="...">
</figure>
<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>
</body>
</html>