title: Make image responsive maintaining aspect ratio, with padding either side
body: <p>Here is a link to the working pen: <a href="https://codepen.io/Adam0410/pen/OBqRRN" rel="nofollow noreferrer">https://codepen.io/Adam0410/pen/OBqRRN</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="imgWrapper"&gt;
    &lt;img src="https://thestoryengine.co/wp-content/uploads/2017/11/The-crossroads-Section-images-02.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#imgWrapper {
    display: flex;
    justify-content: center;
  
    width: 100%;
  
    padding: 0 20px;
  }
  
  #imgWrapper img {
    width: 100%;
    max-width: 1660px;
    height: auto;
  }
  </code></pre>
  
  <p>I don't want the image to exceed its original width (hence max-width) but I want it to scale down to the width of the viewport while maintaining its aspect ratio. Currently, the height does not scale with the width, why is this?</p>