web-dev-qa-db-fra.com

Comment créer une grille à partir d'images de différentes tailles?

J'essaie de créer une grille d'images où toutes les images d'une rangée partagent la même hauteur et où chaque rangée utilise la même largeur.

Comment puis-je faire cela et quelles bibliothèques peuvent m'aider?

image grid

javascripthtmlcssgridphoto-gallery
16
serge

Ce type de grille est difficile à réaliser par vous-même, il est donc préférable de ne pas réinventer la roue et d'utiliser des bibliothèques géniales créées par des personnes géniales sur Internet.

Découvrez ces liens qui correspondent le mieux à ce que vous recherchez ->

  1. http://masonry.desandro.com/
  2. http://css-tricks.com/seamless-responsive-photo-grid/

Aussi ce lien http://www.jqueryscript.net/tags.php?/grid%20layout/ a une variété de ces bibliothèques de vue de grille d'images qui peuvent être utiles ..

Le lien astuce CSS est, en fait, une bibliothèque gratuite mise en œuvre facile. L'idée est de définir la largeur des images à 100% et de diviser votre espace en colonnes.

Voici un extrait extrait du lien précédent:

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages
.snippet-result-code {
  height: 500px
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}
<section id="photos"></section>
15
Vishal Nair

Les frameworks CSS Grid fonctionnent bien. Vous pouvez trouver une explication plus détaillée sur le site Web CSS Tricks . Ceci est un exemple qui pourrait fonctionner pour les images ci-dessus. (Et voici mon JSFiddle résultat).

/*grid container*/

 .container {

          display: grid;
          padding:60pt;
          grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;  
          /*adjust outer values if you want less padding on the sides, 
           in jsfiddle I used 5% */
          grid-template-rows: 10% 300pt 250pt 10%;
          grid-column-gap: 10px;
          grid-row-gap: 5px;

        }

    .container div img { width: 100%;
                         height: 100%;
                         }

/*image div classes*/

    .main_1 {
      grid-area: main_1;
      grid-column:2/5;
      grid-row: 2/3; 
    }

    .main_2 {

      grid-area: main_2;
      grid-column:5/8;
      grid-row: 2/3;
    }

    .main_3 {
      grid-area: main_3;
      grid-column:8/11;                                          
      grid-row: 2/3;
    }

    .main_4 {
      grid-area: main_1;
      grid-column:2/4;
      grid-row: 3/4;
    }

    .main_5 {
      grid-area: main_2;
      grid-column:4/7;
      grid-row: 3/4;
    }

    .main_6 {
      grid-area: main_3;
      grid-column:7/11;                                           
      grid-row: 3/4; 
    }
2
Programina