title: How to give image a max-height but retain aspect ratio?
body: <p>The image is 100% of the document width. I want the max-height of the image to be 2/3 of the screen height but to retain aspect ratio, and for the image to be centered.</p>
  
  <p><a href="https://jsfiddle.net/deanmillar/w53v1702/" rel="nofollow noreferrer">Here</a> is a Fiddle for a starting point.</p>
  
  <p>EDIT: I've updated the fiddle to demonstrate one CSS solution I found (shown below in answers) but it would be preferable to have a solution that has more browser support. </p>
  
  <p>Html:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="header-content"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="image-wrapper"&gt;
      &lt;img class="image" src="http://designyoutrust.com/wp-content/uploads/2013/06/376.jpg" alt="pic" /&gt;
  &lt;/div&gt;
  &lt;div class="other-content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
      width: 100%;
      border: 1px solid black;
      box-sizing: border-box;
  }
  .header-content {
      height: 5em;
  }
  .image {
      width: 100%;
  }
  .other-content {
      height: 20em;
      width: 100%;
      background-color: black;
  }
  </code></pre>
  
  <p>I've just started learning web development so I'm very new to all this. I've tried creating a function that says if image height >= 67vh then html width = image width but I couldn't get it to work.</p>
  
  <p>Any help is much appreciated.</p>