How to position multiple screen filled (responsive) DIV's?

Question

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).

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? and 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!

Answer 1

First : positioning the divs

Set

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

So you have a baseline that follows the width/height of the viewport.
Then, make a container that will contain all the "pages" with width:500%; height:500%;

Use child divs to create each "page" and give them width:20%; height:20%; (these divs will then be 100% width/height of viewport). And float them left so they align like a grid.

Second : the images

The best aproach here would be to set the images as background images of each child div (="pages") and use the CSS property background-size:contain; and background-position:center center; so they adpat/crop and center horizontaly/verticaly according to viewport height/width.

Using this technique will save you from blanks between images and images loosing theire aspect ratio.

Fiddle

---

Alternative solution with <img> tag

I don't recomend this solution exept if you don't mind having gaps on the right/left of images on screens that have a wider aspect ratio than your images.

Images are resized using width:auto; height:100%; to adapt like in your example. They are horizontaly centered with display:block; margin:0 auto;

Fiddle

---

Code for the background technique :

HTML :

<div id="wrap">
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
 
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
</div>

CSS :

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:500%;
    height:500%;
}
.image {
    width:20%;
    height:20%;
    float:left;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.img1{
    background-image: url(http://lorempixel.com/output/city-q-g-1724-977-9.jpg);
}
.img2{
    background-image: url(http://lorempixel.com/output/nature-q-c-1724-977-1.jpg);
}
.img3{
    background-image: url(http://lorempixel.com/output/fashion-q-g-1724-977-5.jpg);
}
.img4{
    background-image: url(http://lorempixel.com/output/city-q-c-1724-977-8.jpg);
}
.img5{
    background-image: url(http://lorempixel.com/output/sports-q-g-1724-977-9.jpg);
}

Answer 2

It depends on your options. But you can make 25 div/section elements, which get height and width from screen jQuery could do this if this is ok for you?

On those elements you need to make

div,section{
 background-image: url(path/to/image.jpg); 
 background-size:cover; 
 background-position:left top;
}