Search code examples
htmlcssscalecss-transformsscaletransform

Scale an entire HTML element using CSS

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.

Solution

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