web-dev-qa-db-fra.com

rendre les images de la même taille dans la grille bootstrap

Je crée une galerie d'images avec 3 lignes, chacune contenant 3 images en utilisant le système de grille Bootstrap. Toutes les images ont des tailles différentes. Ce que j'essaie de faire est de créer toutes les images la même taille. J'ai essayé d'utiliser la hauteur maximale ou la largeur maximale dans mon CSS, mais cela n'a pas aidé à rendre toutes les images (vignettes) de taille similaire. Solution?

body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
          </div>
        </div>

        <div class="row flex match-to-row">
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
            </div>
          </div>
    </div>
  </div>
htmlcsstwitter-bootstrapimagebootstrap-grid
6
Jacob Murin

Je pense que la propriété que vous recherchez est object-fit

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

Le object-fit la propriété fonctionne de la même manière que vous utiliseriez background-size: cover sur une image d'arrière-plan pour qu'elle remplisse la page sans s'étirer. De cette façon, vous pouvez définir une largeur dans une règle que toutes les images suivront pour garantir qu'elles sont de la même taille sans déformer votre image.

Les autres valeurs que vous pouvez utiliser avec cette propriété incluent:

  • fill - étire l'image.
  • contain - conserve le rapport hauteur/largeur de l'image.
  • cover - Remplissez la hauteur et la largeur de la boîte.
  • none - Conserve la taille d'origine.
  • scale-down - compare les différences entre none et contain pour trouver la plus petite taille d'objet.

ajustement d'objet | Astuces CSS

16
natejms

il suffit de modifier ceci:

img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}
0
Shark