Problems with scrollbars on resize when trying to fit image to screen without distorting

Question

I'm trying to make a full screen slideshow kind of effect jsFiddle code here, but I am having doubts as to how to do it. As can be seen from my example fiddle, I want the picture to be as big as possible without distorting it (fit to screen). I also want it to be centred vertically and horizontally.

Horzontal centring it is taken care of in css, but I have had to use JavaScript for vertical centring.

My questions are:

1. Is there a better way to do any of this (e.g. all in CSS)?
2. On first load, if the picture (before it has been scaled) is wider than the viewport, a scrollbar is present while my script calculates the height of the viewport. This means that when my script fits the div and img to the window, there is a white gap at the bottom, that is the height of the scroll bar. I can get around this by specifying overflow:hidden, but it seems a bit of a work-around. Is there a better way? Would toggling the image be better?
3. When I resize so that the div is wider than the image, I get a white section under the black div, which creates a vertical scrollbar. Again I can get rid of this with overflow:hidden, but I don't like that approach. I want to know why it is there and how to get rid of it?
4. Sometimes I can make a horizontal scrollbar appear and as i resize it flashes on/off. overflow:hidden fixes this, but I want a cleaner solution.
5. Are there any better ways of coding this, or can my jQuery/Javascript be optimised any further?

Answer 1

Well... that ones tricky. The best way I've found how to do this is to actually put your content in a single cell table and set the vertical- and horizontal-align properties to.... middle and center I think? But anyhow, it can be done. I'll play around with it and see if I can get an example together.

EDIT:

Ok so the first thing I would advise is to let the browser proportionately resize things. You don't need to resize the div, just the image. You can let the browser figure out the vertical alignment as well, which is a much better option than calculating it. This can be done by placing the content in a single cell table. The example code below is pure html and css. You can add something to the effect that you already have to switch the image height and width between 100% auto and auto 100% based on img height vs window height. Hopefully this gets you a little closer to your goal.

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Answer 2

I'm not aware of any crossbrowser solution in pure html/css to accomplish what you've asked for. Any element with an aspect ratio and a fluid width will trigger a "race condition" when the browser decides to show / hide the scrollbar. A browser will force a scrollbar when it detects this situation with elements under its control. This can also be simulated with javascript. I also encountered this problem and created a small library:

https://github.com/ocbnet/layout

There is also a demo that implements what the OP was asking for:

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

Answer 3

1. Yes (for the 100% height part) : html,body,div {height:100%}
2. overflow:hidden seems nice to me. Other possible solutions :
   1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (document.write should be avoided however)
   2. <img src="" width="1" height="1" /> (ie, define a small default size -> no scrollbar)
   3. @Gerben suggestion : css max-width (best)
3. Seems to be the space the horizontal scrollbar would take. I only get this problem at a specific size+ratio too.
4. This is when the pictureRatio is equal or pretty close to the fullDivRatio. I can't find hoo with overflow:hidden.
5. No idea, seems good enough IMO.

So yeah, the weird scrollbar on resizing happens because of border effect, the scrollbar appear when you switch from the if to the else or vice-versa.

With this jsFiddle I never get horizontal scrollbar, but I still get vertical one from time to time.

Answer 4

You can do this:

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

It's all pure HTML and CSS. An alternative to Joseph's answer of using table if you don't want to use table in your structure.