0

I've this situation: http://jsfiddle.net/neko/CTA4C/7/ (images are just for reference)

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

In short, I've an <img> inside a div as a background fixed in page, inside it (the div) another div with an <img> that moves around triggered by JQ.

So the question is: how can I scale the WHOLE page/div container so the img fits the screen height, maintaining the relation with the moving div, which has a fixed start position value in px?

I've tried something like -webkit-transform: scaleY() but it's just a scaler, right? It's not working like -webkit-transform: scaleY(100%) ?

My final goal is to have a fixed pixel "canvas" that stretches itself by fitting the height of the device and, at the same time, to have the children acting like the father.

p.s. this is just for tablet webkit based, so I've no problem with using webkit only dedicated code.

Leonardo Gandini
  • 238
  • 1
  • 15
  • `` elements are not containers so there is no such thing as a `` tag and trying to use that to enclose text is invalid HTML. I'm also adding your code to the question so it remains useful long after the fiddle link goes dead. – Sparky Apr 23 '12 at 23:18
  • edited, anyway the the point it's not the img, is the relation between a fixed position in pixel of the child and a percentage scale of the father. I hope it's clear... – Leonardo Gandini Apr 23 '12 at 23:25
  • I know that wasn't the point. However, without valid HTML, you can't count on anything working as expected. – Sparky Apr 23 '12 at 23:52

0 Answers0