title: Prevent image distortion inside a resizing container with CSS
body: <p>Given a HTML snippet </p>
  
  <pre><code>&lt;div class="swiper-slide"&gt;
    &lt;div layout="row" layout-align="start stretch" flex style="height: 100%;"&gt;
      &lt;div layout="row" layout-align="center center" flex="grow"&gt;
        &lt;img src="/media/{{mediaId}}/h/1440"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and it's CSS as</p>
  
  <pre><code>img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  </code></pre>
  
  <p>The image does remain centered and does not grow beyond it's parent container, however it does horizontally stretch or shrink when the component is resized. Is it possible to tell that the image element should preserve the aspect ratio of the displayed image?</p>