HTML CSS Ken Burns distorted effect - html

Question

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.
Right now i tried to fix it with width set to auto and height to 100%, but I can't get it to work.
I made a fiddle here.
HTML
<div id="header-wrapper" class="wrapper">
<img src='http://eventzerz.com/wp-content/uploads/2018/03/Test-Logo-Small-Black-transparent-1.png' class='image-kenburns'>
<div id="header">
</div>
</div>
CSS
#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);
}
}
EDIT: I should mention that it's fine looking on desktop, what I need is the responsive version for tablets.

Answer 1

If you need your image to resize proportionally / keep the aspect ratio just add to your .image-kenburns class height: auto