从上到下均匀裁剪图像答案

【问题标题】：Cropping an image equally from top to bottom从上到下均匀裁剪图像
【发布时间】：2011-11-22 21:58:32
【问题描述】：

我正在尝试制作一个网站的小型动画介绍。基本上我想要一个集中的图像从顶部和底部均匀裁剪，然后向上移动到屏幕顶部。

到目前为止，我有以下内容：http://dk8.co/animation.html

这是使用以下 CSS：

      #pic {
        position:absolute;
        top:0%;
        width: 100%;
        height: 200px;
        left: 0px;
        background:url(web/images/AM-title.jpg) no-repeat;
         -moz-background-size:100% auto;
         -webkit-background-size:100% auto;
         -webkit-background-position:0% auto;
         background-size:100% auto;
         -o-background-size: 100% auto;
        -webkit-animation-name: move;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
    }




    @-webkit-keyframes move {
    0% {
        top: 50%;
        height: 400px;
    }

        50% {
        top: 50%;
        height: 300px;
    }
}

但是，问题在于“裁剪”只是从底部向上而不是从顶部和底部进行。

有没有什么方法可以实现上下均等的裁剪效果？

【问题讨论】：

标签： css animation crop

【解决方案1】：

非常简单的解决方案是将 50% 分配给 background-position 属性，或者简单地将 50% 添加到上面的简写中：

background: url(web/images/AM-title.jpg) 50% 50% no-repeat;

这是一个工作示例：http://jsfiddle.net/sl1dr/L3sQW/

【讨论】：

【解决方案2】：

我为 Prototype.js 写了this five years ago。您可以挖掘代码，看看它是如何工作的。

基本上你同时移动元素的位置和背景位置。

【讨论】：