Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 340
Ben Parsons Avatar asked Mar 16 '17 10:03

Ben Parsons


People also ask

How do I scale an entire HTML page?

Using Firefox, you can enlarge an entire web page by simply pressing CTRL + . What this does is proportionally enlarge the entire web page (fonts, images, etc).

How do you scale an element in CSS?

The CSS scale() function is used to scale elements in a two-dimensional space. The scale() function scales an element based on the number/s that you provide as an argument. You can scale in the direction of the x -axis, the y -axis, or both. If you provide only one parameter, it will scale the element along both axes.

How do you scale proportionally in CSS?

The resize image property is used in responsive web where image is resizing automatically to fit the div container. The max-width property in CSS is used to create resize image property. The resize property will not work if width and height of image defined in the HTML.

How do you resize a scale object in CSS?

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.


1 Answers

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);
    }
like image 174
modu Avatar answered Oct 25 '22 19:10

modu