title: image aspect ratio is different in different browsers
body: <p>I'm adapting a css grid-based layout to a flex-based one, and I have tried all the various ways I've read to make sure an image in that layout maintains its aspect ratio, but for some reason, if it's correct in Firefox, it's different in IE11, and if it's correct in IE11 it's wrong in Firefox.
  The layout is a simple one (I think).  It has an overall flex column container for the page, and then a smaller flex row at the "bottom". Any idea what's going wrong and how I can get the image to display at its correct aspect ratio regardless of browser?
  I have attached a screen capture of how the small image displays.</p>
  
  <p><a href="https://i.stack.imgur.com/76IOm.png" rel="nofollow noreferrer">![IE11 (on the left) and in Firefox (on the right).
  The small rectangle at the bottom between the menu and the temporary message is the image that is not displaying correctly.]<a href="https://i.stack.imgur.com/76IOm.png" rel="nofollow noreferrer">1</a></a></p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;style media="screen"&gt;
  * {
      margin: 0;
      color: white;
      box-sizing: border-box;
    }
  body, html {
      background-color: black;
    }
  .homepageflexcontainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  .innerflexcontainer {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    #homepageimage {
      align-self: center;
      width: 100vw;
      min-width: 280px;
      max-width: 1400px;
      min-height: 165px;
      max-height: 823px;
    }
  div.message {
      text-align: right;
      min-width: 14em;
      font-size: calc(12px + 0.5vw);
      line-height: 1.25em;
    }
  img.logo {
      min-width: 70px;
      width: auto;
      max-height: 50%;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: .3vw;
    }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="homepageflexcontainer"&gt;
      &lt;img id="homepageimage" src="HomePage(big).png" alt=""&gt;
      &lt;div class="innerflexcontainer"&gt;
      &lt;div class="message"&gt;temporary message&lt;/div&gt;
      &lt;img class="logo" src="logo.jpg" alt=""&gt;
  
      &lt;nav&gt;
        &lt;li&gt;menu item&lt;/li&gt;
        &lt;li&gt;menu item&lt;/li&gt;
        &lt;li&gt;menu item&lt;/li&gt;
        &lt;li&gt;menu item&lt;/li&gt;
        &lt;li&gt;menu item&lt;/li&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>