Replace an existing vertically centered image, with an existing Ken Burns effect - html

Question

I’ve 2 pieces of code that work brilliant independently.
The first will vertically and horizontally center an image regardless of brower size. The second produces the Ken Burns effect.
I would like to vertically and horizontally center the Ken Burns effect regardless of browser size.
Thank you in advance for your time and patience.
First:
<div class="parent">
<img class="responsive center" src="https://unsplash.it/900/700">
</div>
------------
parent {
position: relative;
}
.responsive {
max-width: 100%;
max-height: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Second:
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
------------
.image-wrap {
width: 100%;
height: 50vw;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap img {
width: 100%;
animation: move 40s ease;
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
}
#-webkit-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 left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
}

Answer 1

Try this code:
.image-wrap {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap img {
animation: move 40s ease;
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
}
#-webkit-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 left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
}
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>