title: HTML CSS Ken Burns distorted effect
body: <p>I have a website with a header image ( 3279 x 710 px ) and I added a Ken Burns effect to it, but it seems like it is distorted. I made a fiddle with a test image, but i can't reproduce the distorted effect, however it has something to do with it's aspect ratio. The Image looks like it's pressed together.</p>
  
  <p>Right now i tried to fix it with width set to auto and height to 100%, but I can't get it to work.</p>
  
  <p>I made a fiddle <a href="https://jsfiddle.net/k3fk8edr/" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="header-wrapper" class="wrapper"&gt;
    &lt;img src='http://eventzerz.com/wp-content/uploads/2018/03/Test-Logo-Small-Black-transparent-1.png' class='image-kenburns'&gt;
    &lt;div id="header"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#header-wrapper {
    background: transparent;
    padding: 0;
  }
  
  .wrapper {
    padding: 6em 0 9em 0;
  }
  
  .wrapper .title {
    font-size: 0.9em;
    width: 25em;
    /*
              height: 3.25em;
  */
    height: 3.4em;
    top: -3.25em;
    line-height: 3.25em;
    margin-bottom: -3.25em;
    margin-left: -12.5em;
    padding-top: 0.5em;
  }
  
  #header {
    position: relative;
    padding: 12em 0;
  }
  
  .homepage #header {
    padding: 18em 0;
  }
  
  .image-kenburns {
    overflow: hidden;
    position: absolute;
    z-index: -1;
    animation: move 40s ease-in infinite;
    height: 100%;
    width: 100%;
  }
  
  @keyframes move {
    0% {
      -webkit-transform-origin: bottom left;
      -moz-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
      -o-transform-origin: bottom left;
      transform-origin: bottom right;
      transform: scale(1.0);
      -ms-transform: scale(1.0);
      -webkit-transform: scale(1.0);
      -o-transform: scale(1.0);
      -moz-transform: scale(1.0);
    }
    50% {
      transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      -o-transform: scale(1.2);
      -moz-transform: scale(1.2);
    }
    100% {
      transform: scale(1.0);
      -ms-transform: scale(1.0);
      -webkit-transform: scale(1.0);
      -o-transform: scale(1.0);
      -moz-transform: scale(1.0);
    }
  }
  </code></pre>
  
  <p>EDIT: I should mention that it's fine looking on desktop, what I need is the responsive version for tablets. </p>