ipad - Webkit で画面に合わせて div/site 全体を比例的にスケーリングします

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    
}​

要するに、<img>ページで固定された背景として div 内に div があり、その内部 (div) には<img>、JQ によってトリガーされて動き回る別の div があります。

div問題は、固定の開始位置の値がpxである移動との関係を維持しながら、imgが画面の高さに合うようにページ/ divコンテナ全体をスケーリングするにはどうすればよいですか?

私は何かを試してみまし-webkit-transform: scaleY()たが、それは単なるスケーラーですよね? のように機能していません-webkit-transform: scaleY(100%)か？

私の最終的な目標は、デバイスの高さに合わせて伸縮する固定ピクセルの「キャンバス」を作成すると同時に、子供たちを父親のように振る舞わせることです。

ps これはタブレット Webkit ベース専用なので、Webkit のみの専用コードを使用しても問題ありません。