これが私のコードです。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 class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
<div class="card-block">
<h4 class="card-title">Black Cherry</h4>
<p class="card-text">Our classic vanilla loaded with plump black cherries to give flavor and color</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/mintChip.jpg" />
<div class="card-block">
<h4 class="card-title">Mint Chip</h4>
<p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</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/pistachio.jpg" />
<div class="card-block">
<h4 class="card-title">Pistachio</h4>
<p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</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/IceCream.jpg" />
<div class="card-block">
<h4 class="card-title">More Flavors</h4>
<p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
</div>
</div>
</div>
</div>
ベストアンサー1
CSS でこれを試してください:
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
必要に応じて高さを調整してください。オブジェクトフィット: カバー画像の拡大ではなくズームを有効にします。