Scale an entire HTML element using CSS

Ben Parsons picture Ben Parsons · Mar 16, 2017 · Viewed 10k times · Source

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.

Answer

modu picture modu · Mar 16, 2017

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);
    }