title: How to adjust image dynamically with CSS for resizing of browser window
body: <p>So I want my image to be a 'fixed height' on the page. i.e. 500px. but upon resizing the browser window, I want the image to adjust automatically (I guess by zooming in and out) so it remains proportional and not blurred. </p>
  
  <p>I have this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.homepageheaderbox
  {
  height: 470px; 
  width: 100%; 
  margin-top:0%; 
  padding-left: 0; 
  width: 100%; 
  margin-bottom: 0; 
  margin-right: 0;
  }
  .homepageheaderbox img {
      max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="homepageheaderbox"&gt;&lt;img style="margin-top:0%; 
  padding-left: 0; 
  max-width: 100%; 
  height: auto; 
  margin-bottom: 0; 
  margin-right: 0;" 
  src="../Images/Homepage/RyanTeachesHome1.jpg"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know there is some unnecessary code here, I am still playing around with it. </p>
  
  <p>Currently, the image resizes dynamically as the browser is resized, but the image height on the page changes also. To see more clearly what I am aiming to get, please visit: <a href="http://ryanteaches.com/" rel="nofollow noreferrer">http://ryanteaches.com/</a> (&lt;-- my target) and place it side by side with <a href="http://ryanteaches.com/newindex.html" rel="nofollow noreferrer">http://ryanteaches.com/newindex.html</a> then readjust. You can visually see the difference. </p>
  
  <p>Cheers!</p>