transform:scale to fullscreen?

Question

Good day all,

A series of differently sized images are each individually wrapped in left floating differently sized divs on a horizontally scrolling web page. I want to be able to tap on a div to scale it to fullscreen, (by adding a css class containing the scale instruction, with toggleClass), and tap on the image (which is now fullscreen and thus obscures the div) to return to normal (by removing the class from its wrapping div).

I have found various options to do this for a background image (with a known size) and there are nice fullscreen galleries, but this one evades me.

Because of the different sizes, I cannot use scale(2) or some other fixed value. It is at all possible to webkit-transform:scale to a destination size like 768x1024 rather than a scale factor?

Many thanks!

Answer 1

Have you tried simplifying it a bit more? Try using some java-script to assign a height, width, and z-index to the object on click.

Essentially on click, write to the page: (or something similar)

height:100%;
width:100%;
z-index:999;
position:absolute;