CODEWITHSUNDEEP
htmlcssscaling
oBusk
oBusk

Reputation: 930

Scaling divs and content to fit

I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.

The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.

I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.

How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?

Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/

#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5

Upvotes: 0

Views: 1978

Answers (1)

Mr Lister
Mr Lister

Reputation: 46619

If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.

Solution: all you need to do is add

transform-origin:0 0;

(with the proper prefixes) to the style for #toBeScaled.

See updated fiddle.

Upvotes: 2

Related Questions