Wie erstellen Sie ein Raster aus Bildern unterschiedlicher Größe?

Question

Ich versuche ein Raster aus Bildern zu erstellen, in dem alle Bilder einer Zeile die gleiche Höhe haben und jede Zeile die gleiche Breite hat.

Wie kann ich das tun und welche Bibliotheken können mir helfen?

Answer 1

Diese Art von Gittern sind schwer selbst so ist es besser zu machen, das Rad nicht neu erfinden und genial Bibliotheken von fantastischen Menschen im Internet erstellt wird.

Kasse diese Links, die für die besten sind, was Sie suchen ->

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

Auch dieser Link http://www.jqueryscript.net/tags.php?/grid%20layout/ hat eine Vielzahl dieser Bildrasteransicht Bibliotheken, die kann nützlich sein ..

Answer 2

CSS Grid-Frameworks funktionieren gut. Sie können eine ausführlichere Erklärung auf der Website CSS Tricks finden. Dies ist ein Beispiel, das für die obigen Bilder funktionieren könnte. (Und hier ist mein JSFiddle Ergebnis).

/*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; 
    }