Question

我有一个带有标题图片的网站（3279 x 710 px），我添加了一个Ken Burns效果，但它似乎被扭曲了。我用测试图像制作了一个小提琴，但我不能重现扭曲的效果，但它与它的纵横比有关。图像看起来像被压在一起。

现在我尝试将宽度设置为auto并将高度设置为100％来修复它，但我无法让它工作。

我做了一个小提琴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);
  }
}

编辑：我应该提到它在桌面上很好看，我需要的是平板电脑的响应版本。

Answer 1

如果您需要按比例调整图片大小/保持纵横比，只需添加到.image-kenburns班级height: auto

HTML CSS Ken Burns扭曲效果

1 个答案: