So here is my code, it displays 6 cards, three across and two rows. I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work, I use "img-fluid" as a class and when I go to a mobile or smaller browser, they all have the same width, but the height is still off.
<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>
Here is an image of what I am getting and this is what I want to get where they are all the same size.
. container { width: 50%; } . container img { width: 100%; height: 400px; //this should be the same as the width value.. }
Try this in your css:
.card-img-top { width: 100%; height: 15vw; object-fit: cover; }
Adjust the height vw as you see fit. The object-fit: cover enables zoom instead of image stretching.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With