What’s the best way to scale things proportionally while zooming in and out on a web page?

Question

I’ve read many threads and guides saying that creating a wrapper or a container that envelopes every visible element on the page is the best way to handle this issue. I tried a few times but it doesn’t seem to work, so I’m probably missing something. Not only elements don’t maintain the same aspect ratio, but they even overlap at some point, making it impossibile to distinguish them.

Some websites even make it so that the element you zoom into is not stretched at all. Is it simple to replicate this effect?

Answer 1

by using vector drawing instead of image file or canvas.

for example, svg, css borders.