如何从不同尺寸的图像创建网格？

我想创建一个图像的网格，其中一行的所有图像共享相同的高度，并且每行使用相同的宽度。如何从不同尺寸的图像创建网格？

我该怎么做，图书馆可以帮助我？

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

如何从不同尺寸的图像创建网格？

回答

相关问题