Proportionally resizing divs with a wrapper

Question

Basically I have a bunch of elements inside a div, lets say <div class="wrapper">. I want to be able to scale this outer div and have the elements inside scale properly along with it.

For example, if this were a collection of SVGs all we would have to do is change the transform of the outer SVG. to get this result:

Scaled SVG from blue bounding box

I want to do this same effect with a div wrapper... Is that even possible? (The reason I want to do this is because I want to be able to use img tags etc, otherwise I would simply use the svgs). If it helps, the end goal is to allow the user to drag and drop elements to create their own interface, but it would help if it works on multiple screens.

`transform:scale(x, y)` should work for `divs` as well. Did you try that? — samuellawrentz, Apr 06 '19 at 03:55

score 1 · Answer 1 · answered May 05 '19 at 20:50

1

Credit to @samuellawrentz

Use transform:scale(x, y) to scale any wrapper element

answered May 05 '19 at 20:50

Proportionally resizing divs with a wrapper

1 Answers1