Donc, voici mon code, il affiche 6 cartes, trois en travers et deux lignes. Je souhaite que toutes les images aient la même taille sans devoir redimensionner manuellement les images. La réactivité fonctionne, j'utilise «img-fluid» comme classe et lorsque je vais sur un navigateur mobile ou plus petit, ils ont tous la même largeur, mais la hauteur est toujours incorrecte.
<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>
Voici une image de ce que je reçois et voici ce que je veux obtenir où ils sont tous de la même taille.
Essayez ceci dans votre css:
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
Ajustez la hauteur comme bon vous semble . Le object-fit: cover active le zoom au lieu d’étirer l’image.
c'est un problème connu
Je pense que la solution de contournement devrait être définie comme
.card-img-top {
width: 100%;
}
.card-img-top {
height: 15rem;
object-fit: cover;
}
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}
Comme indiqué ci-dessus, mais lorsque vous ajoutez de la hauteur, je suggère d'utiliser "vh" (unités de hauteur de la fenêtre) pour une expérience plus conviviale pour les mobiles.
Je ne crois pas que vous puissiez le faire sans les rogner, je veux dire que vous pouvez faire les divs à la même hauteur en utilisant jQuery, mais cela ne donnera pas aux images la même taille.
Vous pouvez utiliser la maçonnerie pour rendre ce look décent.
Je suis allé avec "manuellement" en utilisant les mêmes points d'arrêt dans Bootstrap 4 que les requêtes de médias ...
/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
/*height: 11vw;*/
object-fit: cover;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.card-img-top {
height: 19vw;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.card-img-top {
height: 16vw;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.card-img-top {
height: 11vw;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
.card-img-top {
height: 11vw;
}
}
Cela fonctionne, même si j'aimerais qu'il y ait plus de réactivité autochtone de ce type.
Proposition partielle de @ sepuckett86 et I.
Chacune des images doit avoir les dimensions exactes avant de pouvoir être affichée, sinon bootstrap 4 essaiera de les placer dans une forme géniale. Bootstrap a aussi quelque chose comme Maçonnerie sur leurs documents que vous pouvez utiliser si besoin est, vous pouvez voir ici, http://v4-alpha.getbootstrap.com/components/card/#columns .
J'ai résolu ce problème en utilisant Bootstrap 4 Emdeds Utilities
https://getbootstrap.com/docs/4.3/utilities/embed
Dans ce cas, il vous suffit d'ajouter votre image à un div.embbed-responsive
comme ceci:
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
</div>
<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>
Toutes les images correspondent au rapport spécifié par les classes de modificateur:
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1
De plus, ce css active le zoom au lieu d'étirer l'image
.embed-responsive .card-img-top {
object-fit: cover;
}