I'm working on this for a couple of days but can't figure out how to do this properly. I want to have a website that contains 25 images. Now, every image should be screen filling, and therefore be responsive, so that on every screen, small or big, the height of one image (for example) is always 100%. Now I want the 25 images to be positioned in a grid of 5x5.

Question: how can I position this properly? I tried putting the images in DIVs and giving their ID's positions in % up to 400%. 

This image below explains the principle of the grid, and what should happen when you resize your browser window (situation 2).

![How I want the site to work](https://i.stack.imgur.com/GFdGQ.png)

Any ideas how I can solve this (with CSS probably)?
Here are some other threads that I looked at:
[Maintain aspect ratio of div but fill screen width and height in CSS?](https://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css)
and
[Multiple Divs that Stretch to size of window](https://stackoverflow.com/questions/17284899/multiple-divs-that-stretch-to-size-of-window)

I'm making a portfolio website for an artist and the idea is that you can scroll and navigate (via a dropdownlist and a scrollto jQuery) through screen filling images only.

Thanks in advance!