Problem when putting together a grid of images [closed]

0

I want to build a gallery of images, but the problem I have is that the images are uploaded by the user and can be of any size, and I want it to be a perfect grid (columns of the same size)

I can not do this with css or find a bookstore.

Will someone have an example / library?

    
asked by Juan Pablo B 16.08.2018 в 16:18
source

2 answers

1

this is about stilos I would do it like that

CSS for image styles

#img{

   width:400px;
   height:400px;
   max-height:400px;
   max-width:400px;
}
#img img{

    width:100%;
    height:100%;
    max-height:150px;
    max-width:150px;

}

images     

<img src="">
<img src="">
<img src="">
</div>
    
answered by 16.08.2018 в 16:43
1

Ok, I interpret grid as a grid ( link ). In that case, I'll assume that you want the cells in your grid to have a certain width and a certain height.

To achieve this you can use a flexbox to mount the grid.

Images can be adjusted with CSS (taking advantage of the fact that width: auto and height: auto guarantee to maintain the proportion of the image).

I have prepared a JsFiddle: link

Note: I recommend that you limit the maximum size of the images. If you do not do it, the loading time of your page will increase considerably. Another option is to reduce its size on the server.

    
answered by 16.08.2018 в 17:01