title: html/css can't change image height with percentage
body: <p>So I've got a simple little domain up with a fileserver.
  I want the main page just to be an image.
  I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.</p>
  
  <pre><code>&lt;img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;"&gt;
  </code></pre>
  
  <p>I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like</p>
  
  <pre><code>&lt;img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;img src="fruit.png" alt="a bowl of fruit" style="width:50%;"&gt;
  </code></pre>
  
  <p>work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
  So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.</p>