title: How can I resize an image dynamically with CSS as the browser width/height changes?
body: <p>I wonder how I could make an image resize along with the browser window, <a href="http://erikgyepes.com/html/imgresize/index.html">here</a> is what I have done so far (or download <a href="http://d.pr/TwD8">the whole site in a ZIP</a>).</p>
  
  <p>This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.</p>
  
  <p>This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)</p>
  
  <p>Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)</p>