10

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.

2

1 Answer 1

12

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:

  • It's not a crossbrowser solution if you are using positioning
  • It doesn't work on Firefox

example:

    div {
    zoom: 50%;
    -moz-transform: scale(0.5);
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.