用现有的Ken Burns效果替换现有的垂直居中图像

Question

我有两段独立运行的代码。

无论浏览器大小如何，第一个都会使图像垂直和水平居中。第二个产生Ken Burns效果。

我想使Ken Burns效果垂直和水平居中，而与浏览器的大小无关。

提前感谢您的时间和耐心。

第一：

<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%);
}

第二：

<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

尝试此代码：

.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>