0

我有这种情况： http: //jsfiddle.net/neko/CTA4C/7/（图片仅供参考）

HTML：

<div id="container">
    <div id="lady">
        <img src="http://a2.twimg.com/profile_images/1120515410/ladybird__1__normal.jpg">Click me!</img>
    </div>
    <div id="containerbg"><img id="BG" src="http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg"></img></div>

</div>

jQuery：

$("#lady").click(function(){
    $(this).addClass("animlady");
    });

CSS：

@-webkit-keyframes ladymove{
    0% {-webkit-transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(100px, 40px);}
    100% {-webkit-transform: translate(300px, -20px);}
}
#BG{position:absolute}
#lady{
    position: absolute;    
    float:left;
    top:240px;
    margin-left: 250px;
    z-index:2;
    color:white        
}
.animlady{
    -webkit-animation-name: ladymove;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards    
}​

简而言之，我<img>在一个 div 内部作为背景固定在页面中，在它内部（div）另一个 div 带有一个<img>由 JQ 触发的移动。

所以问题是：我如何缩放整个页面/div 容器，使 img 适合屏幕高度，保持与移动的关系，移动div的起始位置值以 px 为单位？

我试过类似的东西，-webkit-transform: scaleY()但它只是一个缩放器，对吧？它不工作-webkit-transform: scaleY(100%)吗？

我的最终目标是拥有一个固定的像素“画布”，它可以通过适应设备的高度来伸展自己，同时让孩子们表现得像父亲一样。

ps 这仅适用于基于 webkit 的平板电脑，所以我只使用 webkit 专用代码没有问题。

4

0 回答 0