title: Problems with scrollbars on resize when trying to fit image to screen without distorting
body: <p>I'm trying to make a full screen slideshow kind of effect <a href="http://jsfiddle.net/Grezzo/6fJmU/" rel="nofollow">jsFiddle code here</a>, 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.</p>
  
  <p>Horzontal centring it is taken care of in css, but I have had to use JavaScript for vertical centring.</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>Is there a better way to do any of this (e.g. all in CSS)?</li>
  <li>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?</li>
  <li>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?</li>
  <li>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.</li>
  <li>Are there any better ways of coding this, or can my jQuery/Javascript be optimised any further?</li>
  </ol>