How do I make images fit the entire screen fully, regardless of screen size?

Question

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 put all the images in a div and set no-wrap property. The problem is: Each image is too big for my screen. 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?

HTML:

<html>  
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="jquery-2.1.1.js"></script>
    <script src="jquery.scrollpath.js"></script>
    <script src="createScroll.js"></script>
  </head>
  <body>
    <div id="scrollable">
      <img src="1.png"></img> 
      <img src="2.png"></img>
      <img src="4.png"></img>
      <img src="5.png"></img>
      <img src="6.png"></img>
      <img src="7.png"></img>
      <img src="8.png"></img>
    </div>
  </body>
</html>

CSS:

#scrollable {
  display: inline;
  white-space:nowrap;
  float: left;
}

Could this help? http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang — Lauri Elias, Oct 30 '14 at 19:55
the `float: left;` and `display:inline` is not needed for the parent DIV element. — Roko C. Buljan, Oct 30 '14 at 20:24

mikelt21 · Accepted Answer · 2014-10-30T20:18:27.523

3

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.

edited Oct 30 '14 at 20:18

answered Oct 30 '14 at 19:58

mikelt21

2,728
4
23
33

This won't work if the image is smaller than the screen. – recursive Oct 30 '14 at 19:59
1

also without 100vh: http://jsfiddle.net/48ck23L9/5/ 100% the 100% absolute container is enough – Roko C. Buljan Oct 30 '14 at 20:45
cool! that's probably better supported by non-html5 browsers too =) – mikelt21 Oct 30 '14 at 21:08

score 1 · Answer 2 · answered Oct 30 '14 at 20:38

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

<div id="scrollable">
  <div style="background-image: url(1.jpg);"></div>
  <div style="background-image: url(2.jpg);"></div>
  <div style="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.}

score 0 · Answer 3 · answered Oct 30 '14 at 19:55

0

You can use the vh and vw units.

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

answered Oct 30 '14 at 19:55

recursive

83,943
34
151
241

this stretches the image to the viewport size so that the image will skew. – mikelt21 Oct 30 '14 at 20:12
Well, yes, that's literally what the question is asking for though. The question is asking for all images to fit to the browser window, "regardless of screen size". That means sometimes images will have to be skewed. – recursive Oct 30 '14 at 22:29

How do I make images fit the entire screen fully, regardless of screen size?

3 Answers3

Linked