How can I scale an entire element and all children by a specific percentage or to a specific final size?
I have a <table>
, and I am simulating a pictograph using JavaScript to calculate the width of divs + a repeating background tag. I'd like to have just one version of this logic, so scaling the parent table would solve this problem.
1. You can use CSS3 2D transforms:
div {
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
}
you only need to apply this to the parent element.
2. You can use zoom
but it has two disadvantages:
example:
div {
zoom: 50%;
-moz-transform: scale(0.5);
}