Menu
I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width.
Example - http://jsfiddle.net/Fz7qh/2/
When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale?
675
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.
For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent's width, then define the element's padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need. And that's it!
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
To emulate what the zoom property does in this case, you can add -transform-origin: 0 0; and set the width to oldWidth / newScale (100 / 0.7 ~= 142.857143):
http://jsfiddle.net/thirtydot/Fz7qh/5/
div.zoomed {
-webkit-transform: scale(.7);
-webkit-transform-origin: 0 0;
width: 142.857143%;
}
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
