9

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.

Ben Parsons
  • 1,425
  • 1
  • 14
  • 30

1 Answers1

11

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);
    }
Gökhan Mete ERTÜRK
  • 3,378
  • 2
  • 19
  • 23