所以这是我的代码,它显示6张卡,3对,2行.我想要的图像都是相同的大小,而无需手动调整图像大小.响应性确实有效,我使用"img-fluid"作为一个类,当我使用移动设备或更小的浏览器时,它们都具有相同的宽度,但高度仍然是关闭的.
<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
<div class="card-block">
<h4 class="card-title">Brownie Delight</h4>
<p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
<div class="card-block">
<h4 class="card-title">Butter Pecan</h4>
<p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
</div>
</div>
</div>
<div …我正在制作一张具有相同图像尺寸和文字的卡片。我已经给max-height了图片。但是图像大小不相等。我将在下面给出我的代码。我附上我的网站的快照，以获取更好的参考。在这个项目中，我正在使用HTML，CSS和BOOTSTRAP4
问题是：图像
.kbcard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.kbtitle {
color: grey;
font-size: 18px;
}
a .kb{
text-decoration: none;
font-size: 22px;
color: black;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John" style="max-width:300px">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
<div class="col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John" style="max-width:300px">
<h1>John …