title: Keeping an image centred, whilst it changes size by % with browser size?
body: <p>How do I centre this image but also keep the image size as a percentage so it changes size with the browser? I have been playing around with the css on this image here to get it to resize the height as well as the width <a href="http://www.georgewoolfe.com/home.html" rel="nofollow">http://www.georgewoolfe.com/home.html</a></p>
  
  <p>this is the css:</p>
  
  <pre><code>#image {
      bottom: 50%;
      height: 40%;
      left: 50%;
      margin: 0 -40%;
      position: absolute;
      right: 50%;
      top: 56px;
      width: 80%;
  }
  
  #image img {
      width: 100%;
  }
  </code></pre>
  
  <p>I was also wondering if there might be a bit of jQuery that would do this? </p>
  
  <p>I found this website that does exactly what I mean <a href="http://www.laurabartlettgallery.com/exhibitions/bravo-zebra/" rel="nofollow">http://www.laurabartlettgallery.com/exhibitions/bravo-zebra/</a></p>
  
  <p>Thanks
  Angela </p>