Question

我遇到这种情况：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    
}

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

所以问题是：如何缩放WHOLE页面/ div容器以使img适合屏幕高度，保持与移动div的关系，它具有固定的起始位置值px？

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

我的最终目标是拥有一个固定的像素“画布”，通过调整设备的高度来拉伸自己，同时让孩子们像父亲那样行事。

P.S。这只是基于平板电脑webkit，所以我使用webkit只有专用代码没问题。

按比例缩放整个div / site以适应webkit的屏幕

0 个答案: