title: Make image take up 100% of the height, but not 100% of the height (and keep image same dimensions when zooming out)
body: <p>EDIT: Thanks to minitech, got it working much closer than it was before. I used 'cover' for background size and it no longer resizes when zooming in/out (as hoped), but the image is also way too big now. Is there any way around this?</p>
  
  <p>Thanks again.</p>
  
  <p>...</p>
  
  <p>Original Post:</p>
  
  <p>I'm making a website where I'd like for the left column to be an image that takes up 100% of the height and 30ish% of the width of whatever resolution the user is browsing it on. Also, if they zoom in/out, I'd like for the image to resize so that it still maintains the full height of the browser.</p>
  
  <p>I tried using the following javascript to set the width/height of a containing div in pixels, and then adjust the rest with percentages:</p>
  
  <p><code>document.write('&lt;div id="container" style="width: ' + window.innerWidth + 'px; height: ' +  window.innerHeight + 'px;"&gt;');</code></p>
  
  <p>It doesn't work quite as I had anticipated (not readjusting the dimensions) and is either taller or shorter than the viewing height on several browsers/resolutions I've tested it with (especially on iPad).</p>
  
  <p>The site is <a href="http://lesliecampbellweddings.com/" rel="nofollow">http://lesliecampbellweddings.com/</a>.</p>
  
  <p>Any help is greatly appreciated!</p>
  
  <p>Thanks</p>