Databases
StackOverflow2013
Postsdbo
POScale proportional the whole div/site to fit screen with webkit
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScale proportional the whole div/site to fit screen with webkit
    primarykey
    data
    text
    <p>I've this situation: <a href="http://jsfiddle.net/neko/CTA4C/7/" rel="nofollow">http://jsfiddle.net/neko/CTA4C/7/</a> (images are just for reference)</p> <p>HTML:</p> <pre><code>&lt;div id="container"&gt; &lt;div id="lady"&gt; &lt;img src="http://a2.twimg.com/profile_images/1120515410/ladybird__1__normal.jpg"&gt;Click me!&lt;/img&gt; &lt;/div&gt; &lt;div id="containerbg"&gt;&lt;img id="BG" src="http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg"&gt;&lt;/img&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>$("#lady").click(function(){ $(this).addClass("animlady"); }); </code></pre> <p>CSS:</p> <pre><code>@-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 }​ </code></pre> <p>In short, I've an <code>&lt;img&gt;</code> inside a div as a background fixed in page, inside it (the div) another div with an <code>&lt;img&gt;</code> that moves around triggered by JQ.</p> <p>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 <code>div</code>, which has a fixed start position value in px?</p> <p>I've tried something like <code>-webkit-transform: scaleY()</code> but it's just a scaler, right? It's not working like <code>-webkit-transform: scaleY(100%)</code> ?</p> <p>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> <p>p.s. this is just for tablet webkit based, so I've no problem with using webkit only dedicated code.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLeonardo Gandini
    1. USLeonardo Gandini
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. USLeonardo Gandini
      1. VTFavorite
    3. VO
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. This table or related slice is empty.
      1. VTDownMod
    1. CO`<img>` elements are not containers so there is no such thing as a `</img>` 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.
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. USSparky
    2. COedited, 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...
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. USLeonardo Gandini
    3. COI know that wasn't the point. However, without valid HTML, you can't count on anything working as expected.
      singulars
      1. POScale proportional the whole div/site to fit screen with webkit
      1. USSparky
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload