horizontal scrolling list items images not fitting properly - html

Question

Hey guys I am working on this responsive horizontal gallery, but now I have a dilemma.
I am trying to get 4 list items on a single shot (viewport).
The images are somehow not stretched to the full height.
Have a look and please tell me if my image size is not fine or something like that.
I need at least 4 images on a single shot.
Thanks
FIDDLE
li {
display: inline-block;
max-height: 100%;
width: 25%;
}
li img {
max-width: 100%;
}
Code looks something like this. Please check fiddle. thanks.
Something like this Link

Answer 1

Here's my answer:
http://jsfiddle.net/SKEL2/14/
I set all the widths to be 100% of the window (INCLUDING html and body), this might be a problem if you have other scrollable elements inside the page.
after that I just positioned the images inside the with position absolute, and gave them a height of 100% (this will stretch them to the bottom of the container, keeping the aspect ratio constant).
To keep it centered I used the
top: 50%;
transform: translateX(-50%);
trick, that will keep an absolutely positioned element in the center of the container (as long as the container has position: relative)
I hardcoded a
min-width 420px;
to avoid the white borders around the images when the window became too small.
Hope this helps

Answer 2

Check this fiddle: http://jsfiddle.net/SKEL2/15/
*{
height:100%;
}
body {
width:100%;
margin: 0;
padding: 0;
}
slides {
width: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
ul {
width:100%;
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
max-height: 100%;
width: 25%;
background-image:url('http://beautifulsoftwares.com/scroll/img/2.jpg');
background-size:cover;
background-position:50% 50%;
}
li img {
max-width: 100%;
}
background-image:url(''); - Sets an image to the element
background-size:cover; - Property to cover the entire width and height with image
background-position:50% 50% - Centers the image