如何從不同尺寸的圖像創建網格？

我想創建一個圖像的網格，其中一行的所有圖像共享相同的高度，並且每行使用相同的寬度。如何從不同尺寸的圖像創建網格？

我該怎麼做，圖書館可以幫助我？

image grid

來源

2014-03-30 serge

難道你只是鏈接到圖像或截圖嗎？我無法看到您在鏈接的頁面上查找哪種效果。您是指Google圖片搜索結果的佈局方式，以便將不同尺寸的圖片放入一個網格中？ – danijar

[看]（http://postimg.org/image/t5y1ie1b3/） – serge

好吧，我把它包括在你的問題。 – danijar

這種類型的電網都難以通過自己賺那麼它最好不要重新發明輪子，並使用真棒人在互聯網上創建真棒庫。

結帳這個鏈接這是最適合你在找什麼 - >

而且這個環節http://www.jqueryscript.net/tags.php?/grid%20layout/有各種各樣的圖像網格視圖圖書館的這可能是有用的..

來源

2014-03-30 09:41:56

自己做這件事實際上並不難（我不是在暗示）。創建五個欄目。均勻地填充圖像，調整大小以適應列寬。你甚至不需要JavaScript。 – danijar

@danijar能說更多嗎？ – serge

@VishalNair，非常感謝！ – serge

CSS網格框架工作良好。你可以在網站CSS Tricks上找到更詳細的解釋。這是一個可以用於上述圖像的示例。（這裏是我的JSFiddle結果）。

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

來源

2017-09-17 00:31:49 Programina

如何從不同尺寸的圖像創建網格？

回答

相關問題