Imagine a scenario where it's not possible to change the content of a div, but only its shape and size by using transform: scale(1.4)
for instance.
To better understand this concept, take a look at This Website and try resizing the window using browser dev tools.
Notice how the entire application changes shape without any overflow, instead of moving elements to make the site responsive!
How can we achieve this effect with CSS?
I experimented with vw
and vh
, but they only adjust width and height based on screen size.
I also attempted to use transform: scale(1.5)
, but that value is fixed. Is there a way to dynamically assign a value inside scale(HERE)
similar to using vw
?
I did not include an actual example since it's just a simple div :)
Here is an illustration: