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

【问题标题】：Replace an existing vertically centered image, with an existing Ken Burns effect用现有的 Ken Burns 效果替换现有的垂直居中图像
【发布时间】：2020-09-14 09:54:57
【问题描述】：

我有 2 段代码可以独立运行。

第一个将垂直和水平居中图像，无论浏览器大小如何。第二个产生肯伯恩斯效应。

无论浏览器大小如何，我都想将 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);
    }
  }

【问题讨论】：

标签： html css animation responsive center

【解决方案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>

【讨论】：