Best IT Recipes

Scale / scale the DOM element and the space it occupies using CSS3 () transform scale

In the middle of my page, I have a div element with some content in it (other divs, images, whatever).

<div> before </div> <div id="content-to-scale"> <div>something inside</div> <div>another something</div> </div> <div> after </div>

I would like to scale this element (content scaling) and all its children. This seems to work to scale the CSS3 scale. However, the problem is that this transformation is only for visualizing this hierarchy of elements; it does not change the amount of space (or position) of the element on the page. In other words, scaling this element more will cause the overlapping text "before" and "after".

Is there a simple / reliable way to scale not only the visual representation, but also the amount of space occupied?

Extra points for pure CSS without Javascript. Even more points for a solution that does the right thing with other transformation functions such as rotation and skew. It does not need to use CSS3 conversion, but it needs to be supported in all the latest browsers that support HTML5.

+33
css html5 css3 css-transforms scale
May 16 '12 at 21:54
source share
1 answer

HTML (thanks Rory)

 <!DOCTYPE html> <html> <head> <meta name="description" content="Sandbox for Qaru question http://stackoverflow.com/q/10627306/578288" /> <meta charset=utf-8 /> <title>Sandbox for SO question about scaling an element both visually and dimensionally</title> </head> <body> <div id="wrapper"> <div class="surrounding-content"> before </div> <div id="content-to-scale"> <div>something inside</div> <div><img src="http://placekitten.com/g/150/100"></div> <div>another something</div> </div> <div class="surrounding-content"> after </div> </div> </body> </html>

CSS (still started from the Rory base)

 body { font-size: 13px; background-color: #fff; } #wrapper { width: 50%; margin-left: auto; margin-right: auto; border: 0.07692307692307693em solid #888; padding: 1.1538461538461537em; } .surrounding-content { border: 0.07692307692307693em solid #eee; } #content-to-scale { border: 0.07692307692307693em solid #bbb; width: 10em; } #content-to-scale { font-size: 1.1em; } #content-to-scale img { width: auto; height: auto; min-width: 100%; max-width: 100%; }

Explanation:

I use font size and ems to "scale" the sizes of the children.

Ems are units related to the current size of the context context.

So, if I say that I have a 13px font size and a border of 1 (the desired border width in pixels) divded by 13 (the current font size is also in pixels) = 0.07692307692307693em the browser should display a 1px frame

To emulate 15px padding, I use the same formula (desired pixels) / (current font size in pixels) = desired characters. 15/13 = 1.1538461538461537em

To tame the image scaling, I use my old favorite: the scale of preservation of the natural ratio, let me explain:

Images have a natural height and width and the ratio between them. Most browsers will maintain this ratio if the width and height are set to auto. Then you can control the desired width with the minimum width and maximum width, in which case it will always scale to the full width of the parent element, even if it will scale outside its natural width.

(You can also use a maximum width and a maximum height of 100% so that the image does not go beyond the borders of the parent element, but never scale outside their natural sizes)

Now you can control the scaling by adjusting the font size to # content-to-scale. 1.1em is approximately equal to the scale (1.1)

This has some drawbacks: the embedded font size in ems is reused. Value if you have:

 <style type="text/css"> div{ font-size: 16px; } span{ font-size: 0.5em; } </style> <div> <span> <span> Text </span> </span> </div>

You’ll end up with a “Text” rendering of 4 pixels instead of the 8px you would expect.

+8
Aug 23 2018-12-12T00:
source share


More articles:


All Articles