web-dev-qa-db-fra.com

Comment obtenir des images dans la carte de Bootstrap pour avoir la même hauteur/largeur?

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.

htmlcssimagetwitter-bootstrap
19
Renuz

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.

41
sepuckett86

c'est un problème connu

Je pense que la solution de contournement devrait être définie comme 

.card-img-top {
    width: 100%;
}
4
maxisam
.card-img-top {
    height: 15rem;
    object-fit: cover;
}
4
Jeremy Lynch
.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.

3
Dimitar Milushev

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.

http://masonry.desandro.com/

1
Michael Mano

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.

1
Robert Andrews

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 .

0
Renuz

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;
}
0
Pelerano