How Do I Make Images Fit The Entire Screen Fully, Regardless Of Screen Size?

I am trying to make a horizontally scrollable website. I took screenshots of my clients demo website, and labeled them out as images 1-8. To make the site scrollable horizontally I

Solution 1:

Try this, use vh with max-height:

CSS:

#scrollable {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
}

img {
    display: inline-block;
    height: 100vh;
}

See JSFiddle: http://jsfiddle.net/48ck23L9/4/

Note that the second image is originally smaller than the viewport.

Solution 2:

If you want something really responsive I'd go with DIV elements and background images. It's about images after all.

jsBin demo (resize to see the magic!)

<divid="scrollable"><divstyle="background-image: url(1.jpg);"></div><divstyle="background-image: url(2.jpg);"></div><divstyle="background-image: url(3.jpg);"></div></div>

The Simple CSS:

#scrollable{
  height:100%;
  overflow-x: auto;
  white-space: nowrap;
}

#scrollable > div{
  background: none 50% / cover;
  display:inline-block;
  width:100%;
  height:100%;
  margin-right:-4px;
}

Note: Usign this technique as you can clearly see the images will be cropped-to-fit but every image will do exactly what you asked for:

I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?

_{Otherwise, if you want to preserve the whole image, than the answer is banally simple. make it 100% height the container area.}

Solution 3:

You can use the vh and vw units.

img {
    height: 100vh;
    width: 100vw;
}