Menu
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 that element (content-to-scale) and all it's children. Seems like a job for CSS3 transform's scale operation. However, the problem is that this is a transform on the visualization of that element hierarchy only, it doesn't change the amount of space (or position) of the element on the page. In other words, scaling that element larger will cause it to overlap with the "before" and "after" text.
Is there a simple/reliable way to scale not just 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 like rotate and skew. This doesn't have to use CSS3 transform, but it does need to be supported across all recent HTML5 capable browsers.
455
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
And, yes, we can use scale in CSS transitions and animations.
The HTML (Thanks Rory)
<!DOCTYPE html> <html> <head> <meta name="description" content="Sandbox for Stack Overflow 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> The CSS (Still started from Rory's 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%; } The Explanation:
I'm using font size and ems to "scale" the dimensions of the child elements.
Ems are dimension units that are relative to the current context's font-size.
So if I say I have a font-size of 13px and a border of 1 (the desired border-width in pixels) divded by 13 (the current context's font-size also in pixels) = 0.07692307692307693em the browser ought to render a 1px border
To emulate a 15px padding I use the same formula, (desired pixels)/(current context's font-size in pixels) = desired ems. 15 / 13 = 1.1538461538461537em
To tame the scaling of the image I use an old favorite of mine: the natural ratio preserving scale, let me explain:
Images have a natural height and width and a ratio between them. Most browser's will preserve this ratio if both width and height are set to auto. You can then control the desired width with min-width and max-width, in this case making it always scale to the full width of the parent element, even when it will scale beyond it's natural width.
(You can also use max-width and max-height 100% to prevent the image from busting out of the borders of the parent element, but never scaling beyond their natural dimensions)
This does have some drawbacks: nested font-sizing in ems are applied recusively. Meaning 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 will end up with "Text" rendering at 4px instead of the 8px you might expect.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
